<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>吴嘉鸿的搬砖笔记 | 吴嘉鸿的搬砖笔记</title><meta name="author" content="JiaHong Wu"><meta name="copyright" content="JiaHong Wu"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="笔记配套课程：JS基础Day1-01-JavaScript核心与进阶课程安排_哔哩哔哩_bilibili 菜鸟教程参考：JavaScript 教程 | 菜鸟教程 (runoob.com) 一、JS基础 了解变量、数据类型、运算符等基础概念，能够实现数据类型的转换，结合四则运算体会如何编程。   体会现实世界中的事物与计算机的关系 理解什么是数据并知道数据的分类 理解变量存储数据的“容器” 掌握常见">
<meta property="og:type" content="website">
<meta property="og:title" content="吴嘉鸿的搬砖笔记">
<meta property="og:url" content="https://coderwjh.gitee.io/coderwjh.gitee.io/categories/JS%20+%20jQuery%20+%20AJAX.html">
<meta property="og:site_name" content="吴嘉鸿的搬砖笔记">
<meta property="og:description" content="笔记配套课程：JS基础Day1-01-JavaScript核心与进阶课程安排_哔哩哔哩_bilibili 菜鸟教程参考：JavaScript 教程 | 菜鸟教程 (runoob.com) 一、JS基础 了解变量、数据类型、运算符等基础概念，能够实现数据类型的转换，结合四则运算体会如何编程。   体会现实世界中的事物与计算机的关系 理解什么是数据并知道数据的分类 理解变量存储数据的“容器” 掌握常见">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="">
<meta property="article:published_time" content="2023-08-11T09:20:14.861Z">
<meta property="article:modified_time" content="2023-08-11T09:19:52.071Z">
<meta property="article:author" content="JiaHong Wu">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content=""><link rel="shortcut icon" href="/coderwjh.gitee.io/img/favicon.png"><link rel="canonical" href="https://coderwjh.gitee.io/coderwjh.gitee.io/categories/JS%20+%20jQuery%20+%20AJAX"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/coderwjh.gitee.io/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/coderwjh.gitee.io/',
  algolia: undefined,
  localSearch: {"path":"/coderwjh.gitee.io/search.xml","preload":true,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '吴嘉鸿的搬砖笔记',
  isPost: false,
  isHome: false,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2023-08-11 17:19:52'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.2.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/coderwjh.gitee.io/img/tx02.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/coderwjh.gitee.io/archives/"><div class="headline">文章</div><div class="length-num">2</div></a><a href="/coderwjh.gitee.io/tags/"><div class="headline">标签</div><div class="length-num">0</div></a><a href="/coderwjh.gitee.io/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/coderwjh.gitee.io/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/coderwjh.gitee.io/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/coderwjh.gitee.io/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/coderwjh.gitee.io/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 清单</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/coderwjh.gitee.io/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/coderwjh.gitee.io/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/coderwjh.gitee.io/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/coderwjh.gitee.io/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header"><nav id="nav"><span id="blog_name"><a id="site-name" href="/coderwjh.gitee.io/">吴嘉鸿的搬砖笔记</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/coderwjh.gitee.io/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/coderwjh.gitee.io/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/coderwjh.gitee.io/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/coderwjh.gitee.io/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 清单</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/coderwjh.gitee.io/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/coderwjh.gitee.io/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/coderwjh.gitee.io/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/coderwjh.gitee.io/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">吴嘉鸿的搬砖笔记</h1></div></header><main class="layout" id="content-inner"><div id="page"><div id="article-container"><p>笔记配套课程：<a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1Y84y1L7Nn?p=1&vd_source=a565bab8b1699310d0d832ff67f8b07d">JS基础Day1-01-JavaScript核心与进阶课程安排_哔哩哔哩_bilibili</a></p>
<p>菜鸟教程参考：<a target="_blank" rel="noopener" href="https://www.runoob.com/js/js-tutorial.html">JavaScript 教程 | 菜鸟教程 (runoob.com)</a></p>
<h1 id="一、JS基础"><a href="#一、JS基础" class="headerlink" title="一、JS基础"></a>一、JS基础</h1><blockquote>
<p>了解变量、数据类型、运算符等基础概念，能够实现数据类型的转换，结合四则运算体会如何编程。</p>
</blockquote>
<ul>
<li>体会现实世界中的事物与计算机的关系</li>
<li>理解什么是数据并知道数据的分类</li>
<li>理解变量存储数据的“容器”</li>
<li>掌握常见运算符的使用，了解优先级关系</li>
<li>知道 JavaScript 数据类型隐式转换的特征</li>
</ul>
<h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><blockquote>
<p>掌握 JavaScript 的引入方式，初步认识 JavaScript 的作用</p>
</blockquote>
<p>引入方式</p>
<p>JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 <code>script</code> 标签将 JavaScript 代码引入到 HTML 中，有两种方式：</p>
<p><strong>内部方式</strong></p>
<p>通过 <code>script</code> 标签包裹 JavaScript 代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 引入方式<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 内联形式：通过 script 标签包裹 JavaScript 代码 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(<span class="string">&#x27;嗨，欢迎来传智播学习前端技术！&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>外部形式</strong></p>
<p>一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 <code>script</code> 标签的 <code>src</code> 属性引入</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// demo.js</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&#x27;嗨，欢迎来传智播学习前端技术！&#x27;</span>)</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 引入方式<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;demo.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>如果 script 标签使用 src 属性引入了某 .js 文件，那么 标签的代码会被忽略！！！如下代码所示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 引入方式<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;demo.js&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 此处的代码会被忽略掉！！！！</span></span></span><br><span class="line"><span class="language-javascript">  	<span class="title function_">alert</span>(<span class="number">666</span>);  </span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>注释和结束符</strong></p>
<p>通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：</p>
<p><strong>单行注释</strong></p>
<p>使用 <code>// </code> 注释单行代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 注释<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 这种是单行注释的语法</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 一次只能注释一行</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 可以重复注释</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&#x27;嗨，欢迎来传智播学习前端技术！&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>多行注释</strong></p>
<p>使用 <code>/* */</code> 注释多行代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 注释<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/* 这种的是多行注释的语法 */</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/*</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    	更常见的多行注释是这种写法</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    	在些可以任意换行</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    	多少行都可以</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">      */</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&#x27;嗨，欢迎来传智播学习前端技术！&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>注：编辑器中单行注释的快捷键为 <code>ctrl + /</code></strong></p>
<p><strong>结束符</strong></p>
<p>在 JavaScript 中 <code>;</code> 代表一段代码的结束，多数情况下可以省略 <code>;</code> 使用回车（enter）替代。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 结束符<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span> </span><br><span class="line">    alert(1);</span><br><span class="line">    alert(2);</span><br><span class="line">    alert(1)</span><br><span class="line">    alert(2)</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>实际开发中有许多人主张书写 JavaScript 代码时省略结束符 <code>;</code></p>
<p><strong>输入和输出</strong></p>
<p>输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。</p>
<p>举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。</p>
<p><strong>输出</strong></p>
<p>JavaScript 可以接收用户的输入，然后再将输入的结果输出：</p>
<p><code>alert()</code>、<code>document.wirte()</code></p>
<p>以数字为例，向 <code>alert()</code> 或 <code>document.write()</code>输入任意数字，他都会以弹窗形式展示（输出）给用户。</p>
<p><strong>输入</strong></p>
<p>向 <code>prompt()</code> 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 输入输出<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 输入的任意数字，都会以弹窗形式展示</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&#x27;要输出的内容&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(<span class="string">&#x27;要输出的内容&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">prompt</span>(<span class="string">&#x27;请输入您的姓名:&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="js组成"><a href="#js组成" class="headerlink" title="js组成"></a>js组成</h2><p>JavaScript的组成</p>
<ul>
<li>ECMAScript:<ul>
<li>规定了js基础语法核心知识。</li>
<li>比如：变量、分支语句、循环语句、对象等等</li>
</ul>
</li>
</ul>
<ul>
<li>Web APIs :<ul>
<li>DOM   文档对象模型， 定义了一套操作HTML文档的API</li>
<li>BOM   浏览器对象模型，定义了一套操作浏览器窗口的API</li>
</ul>
</li>
</ul>
 

<h2 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h2><blockquote>
<p>理解变量是计算机存储数据的“容器”，掌握变量的声明方式</p>
</blockquote>
<p>变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// x 符号代表了 5 这个数值</span></span></span><br><span class="line"><span class="language-javascript">  x = <span class="number">5</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// y 符号代表了 6 这个数值</span></span></span><br><span class="line"><span class="language-javascript">  y = <span class="number">6</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">  <span class="comment">//举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 将用户输入的内容保存在 num 这个变量（容器）中</span></span></span><br><span class="line"><span class="language-javascript">  num = <span class="title function_">prompt</span>(<span class="string">&#x27;请输入一数字!&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 通过 num 变量（容器）将用户输入的内容输出出来</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">alert</span>(num)</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">document</span>.<span class="title function_">write</span>(num)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>声明</strong></p>
<p>声明(定义)变量有两部分构成：声明关键字、变量名（标识）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 声明和赋值<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// let 变量名</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 声明(定义)变量有两部分构成：声明关键字、变量名（标识）</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// age 即变量的名称，也叫标识符</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> age</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 <code>let</code> 的含义是声明变量的，看到 <code>let</code>  后就可想到这行代码的意思是在声明变量，如 <code>let age;</code> </p>
<p><code>let</code> 和 <code>var</code> 都是 JavaScript 中的声明变量的关键字，推荐使用 <code>let</code> 声明变量！！！</p>
<p><strong>赋值</strong></p>
<p>声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 声明和赋值<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 声明(定义)变量有两部分构成：声明关键字、变量名（标识）</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// age 即变量的名称，也叫标识符</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> age</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 赋值，将 18 这个数据存入了 age 这个“容器”中</span></span></span><br><span class="line"><span class="language-javascript">    age = <span class="number">18</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 这样 age 的值就成了 18</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">write</span>(age)</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 也可以声明和赋值同时进行</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> str = <span class="string">&#x27;hello world!&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(str);</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>关键字</strong></p>
<p>JavaScript 使用专门的关键字 <code>let</code> 和 <code>var</code> 来声明（定义）变量，在使用时需要注意一些细节：</p>
<p>以下是使用 <code>let</code> 时的注意事项：</p>
<ol>
<li>允许声明和赋值同时进行</li>
<li>不允许重复声明</li>
<li>允许同时声明多个变量并赋值</li>
<li>JavaScript 中内置的一些关键字不能被当做变量名</li>
</ol>
<p>以下是使用 <code>var</code> 时的注意事项：</p>
<ol start="2">
<li>允许声明和赋值同时进行</li>
<li>允许重复声明</li>
<li>允许同时声明多个变量并赋值</li>
</ol>
<p>大部分情况使用 <code>let</code> 和 <code>var</code> 区别不大，但是 <code>let</code> 相较 <code>var</code> 更严谨，因此推荐使用 <code>let</code>，后期会更进一步介绍二者间的区别。</p>
<p><strong>变量名命名规则</strong></p>
<p>关于变量的名称（标识符）有一系列的规则需要遵守：</p>
<ol>
<li>只能是字母、数字、下划线、$，且不能能数字开头</li>
<li>字母区分大小写，如 Age 和 age 是不同的变量</li>
<li>JavaScript 内部已占用于单词（关键字或保留字）不允许使用</li>
<li>尽量保证变量具有一定的语义，见字知义</li>
</ol>
<p>注：所谓关键字是指 JavaScript 内部使用的词语，如 <code>let</code> 和<code>var</code>，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 变量名命名规则<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> age = <span class="number">18</span> <span class="comment">// 正确</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> age1 = <span class="number">18</span> <span class="comment">// 正确</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> _age = <span class="number">18</span> <span class="comment">// 正确</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// let 1age = 18; // 错误，不可以数字开头</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> $age = <span class="number">18</span> <span class="comment">// 正确</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> <span class="title class_">Age</span> = <span class="number">24</span> <span class="comment">// 正确，它与小写的 age 是不同的变量</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// let let = 18; // 错误，let 是关键字</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> int = <span class="number">123</span> <span class="comment">// 不推荐，int 是保留字</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="常量"><a href="#常量" class="headerlink" title="常量"></a>常量</h2><p>概念：使用 const 声明的变量称为“常量”。</p>
<p>使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。</p>
<p>命名规范：和变量一致</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">PI</span> = <span class="number">3.14</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）</p>
</blockquote>
<h2 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h2><blockquote>
<p>计算机世界中的万事成物都是数据。</p>
</blockquote>
<p>计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型：</p>
<p>注：通过 typeof 关键字检测数据类型</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 数据类型<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 检测 1 是什么类型数据，结果为 number</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="keyword">typeof</span> <span class="number">1</span>)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>数值类型</strong></p>
<p>即我们数学中学习到的数字，可以是整数、小数、正数、负数</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 数据类型<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> score = <span class="number">100</span> <span class="comment">// 正整数</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> price = <span class="number">12.345</span> <span class="comment">// 小数</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> temperature = -<span class="number">40</span> <span class="comment">// 负数</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="keyword">typeof</span> score) <span class="comment">// 结果为 number</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="keyword">typeof</span> price) <span class="comment">// 结果为 number</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="keyword">typeof</span> temperature) <span class="comment">// 结果为 number</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。</p>
<p><strong>字符串类型</strong></p>
<p>通过单引号（ <code>&#39;&#39;</code>） 、双引号（ <code>&quot;&quot;</code>）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。</p>
<p>注意事项：</p>
<ol>
<li>无论单引号或是双引号必须成对使用</li>
<li>单引号/双引号可以互相嵌套，但是不以自已嵌套自已</li>
<li>必要时可以使用转义符 <code>\</code>，输出单引号或双引号</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 数据类型<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> user_name = <span class="string">&#x27;小明&#x27;</span> <span class="comment">// 使用单引号</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> gender = <span class="string">&quot;男&quot;</span> <span class="comment">// 使用双引号</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> str = <span class="string">&#x27;123&#x27;</span> <span class="comment">// 看上去是数字，但是用引号包裹了就成了字符串了</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> str1 = <span class="string">&#x27;&#x27;</span> <span class="comment">// 这种情况叫空字符串</span></span></span><br><span class="line"><span class="language-javascript">		</span></span><br><span class="line"><span class="language-javascript">    documeent.<span class="title function_">write</span>(<span class="keyword">typeof</span> user_name) <span class="comment">// 结果为 string</span></span></span><br><span class="line"><span class="language-javascript">    documeent.<span class="title function_">write</span>(<span class="keyword">typeof</span> gender) <span class="comment">// 结果为 string</span></span></span><br><span class="line"><span class="language-javascript">    documeent.<span class="title function_">write</span>(<span class="keyword">typeof</span> str) <span class="comment">// 结果为 string</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>布尔类型</strong></p>
<p>表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 <code>true</code> 和 <code>false</code>，表示肯定的数据用 <code>true</code>，表示否定的数据用 <code>false</code>。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 数据类型<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//  pink老师帅不帅？回答 是 或 否</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> isCool = <span class="literal">true</span> <span class="comment">// 是的，摔死了！</span></span></span><br><span class="line"><span class="language-javascript">    isCool = <span class="literal">false</span> <span class="comment">// 不，套马杆的汉子！</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="keyword">typeof</span> isCool) <span class="comment">// 结果为 boolean</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>undefined</strong></p>
<p>未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 数据类型<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 只声明了变量，并末赋值</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> tmp;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="keyword">typeof</span> tmp) <span class="comment">// 结果为 undefined</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>注：JavaScript 中变量的值决定了变量的数据类型。</strong></p>
<h2 id="类型转换"><a href="#类型转换" class="headerlink" title="类型转换"></a>类型转换</h2><blockquote>
<p>理解弱类型语言的特征，掌握显式类型转换的方法</p>
</blockquote>
<p>在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。</p>
<p><strong>隐式转换</strong></p>
<p>某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 隐式转换<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> num = <span class="number">13</span> <span class="comment">// 数值</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> num2 = <span class="string">&#x27;2&#x27;</span> <span class="comment">// 字符串</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 结果为 132</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 原因是将数值 num 转换成了字符串，相当于 &#x27;13&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 然后 + 将两个字符串拼接到了一起</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(num + num2)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 结果为 11</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 原因是将字符串 num2 转换成了数值，相当于 2</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 然后数值 13 减去 数值 2</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(num - num2)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> a = <span class="title function_">prompt</span>(<span class="string">&#x27;请输入一个数字&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> b = <span class="title function_">prompt</span>(<span class="string">&#x27;请再输入一个数字&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(a + b);</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>注：数据类型的隐式转换是 JavaScript 的特征，后续学习中还会遇到，目前先需要理解什么是隐式转换。</p>
<p>补充介绍模板字符串的拼接的使用</p>
<p><strong>显式转换</strong></p>
<p>编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。</p>
<p><strong>Number</strong></p>
<p>通过 <code>Number</code> 显示转换成数值类型，当转换失败时结果为 <code>NaN</code>（Not a Number）即不是一个数字。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 隐式转换<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> t = <span class="string">&#x27;12&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> f = <span class="number">8</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 显式将字符串 12 转换成数值 12</span></span></span><br><span class="line"><span class="language-javascript">    t = <span class="title class_">Number</span>(t)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 检测转换后的类型</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(typeof t);</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(t + f) <span class="comment">// 结果为 20</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 并不是所有的值都可以被转成数值类型</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> str = <span class="string">&#x27;hello&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 将 hello 转成数值是不现实的，当无法转换成</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 数值时，得到的结果为 NaN （Not a Number）</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>(str))</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>理解什么是流程控制，知道条件控制的种类并掌握其对应的语法规则，具备利用循环编写简易ATM取款机程序能力</p>
</blockquote>
<ul>
<li>运算符</li>
<li>语句</li>
<li>综合案例</li>
</ul>
<h2 id="运算符"><a href="#运算符" class="headerlink" title="运算符"></a>运算符</h2><p><strong>算术运算符</strong></p>
<p>数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。</p>
<p>算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等</p>
<table>
<thead>
<tr>
<th>运算符</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>+</td>
<td>求和</td>
</tr>
<tr>
<td>-</td>
<td>求差</td>
</tr>
<tr>
<td>*</td>
<td>求积</td>
</tr>
<tr>
<td>/</td>
<td>求商</td>
</tr>
<tr>
<td><strong>%</strong></td>
<td>取模（取余数），开发中经常用于作为某个数字是否被整除</td>
</tr>
</tbody></table>
<blockquote>
<p>注意：在计算失败时，显示的结果是 NaN （not a number）</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 算术运算符</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span> + <span class="number">2</span> * <span class="number">3</span> / <span class="number">2</span>) <span class="comment">//  4 </span></span><br><span class="line"><span class="keyword">let</span> num = <span class="number">10</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num + <span class="number">10</span>)  <span class="comment">// 20</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num + num)  <span class="comment">// 20</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1. 取模(取余数)  使用场景：  用来判断某个数是否能够被整除</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">4</span> % <span class="number">2</span>) <span class="comment">//  0  </span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">6</span> % <span class="number">3</span>) <span class="comment">//  0</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">5</span> % <span class="number">3</span>) <span class="comment">//  2</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">3</span> % <span class="number">5</span>) <span class="comment">//  3</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 注意事项 : 如果我们计算失败，则返回的结果是 NaN (not a number)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;pink老师&#x27;</span> - <span class="number">2</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;pink老师&#x27;</span> * <span class="number">2</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;pink老师&#x27;</span> + <span class="number">2</span>)   <span class="comment">// pink老师2</span></span><br></pre></td></tr></table></figure>

<p><strong>赋值运算符</strong></p>
<p>赋值运算符：对变量进行赋值的运算符</p>
<p> =     将等号右边的值赋予给左边, 要求左边必须是一个容器</p>
<table>
<thead>
<tr>
<th>运算符</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>+=</td>
<td>加法赋值</td>
</tr>
<tr>
<td>-+</td>
<td>减法赋值</td>
</tr>
<tr>
<td>*=</td>
<td>乘法赋值</td>
</tr>
<tr>
<td>/=</td>
<td>除法赋值</td>
</tr>
<tr>
<td>%=</td>
<td>取余赋值</td>
</tr>
</tbody></table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">let</span> num = <span class="number">1</span></span><br><span class="line"><span class="comment">// num = num + 1</span></span><br><span class="line"><span class="comment">// 采取赋值运算符</span></span><br><span class="line"><span class="comment">// num += 1</span></span><br><span class="line">num += <span class="number">3</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>自增/自减运算符</strong></p>
<table>
<thead>
<tr>
<th>符号</th>
<th>作用</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>++</td>
<td>自增</td>
<td>变量自身的值加1，例如: x++</td>
</tr>
<tr>
<td>–</td>
<td>自减</td>
<td>变量自身的值减1，例如: x–</td>
</tr>
</tbody></table>
<ol>
<li>++在前和++在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用</li>
<li>++在后（后缀式）我们会使用更多</li>
</ol>
<blockquote>
<p>注意：</p>
<ol>
<li>只有变量能够使用自增和自减运算符</li>
<li>++、– 可以在变量前面也可以在变量后面，比如: x++  或者  ++x </li>
</ol>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">// let num = 10</span></span><br><span class="line">    <span class="comment">// num = num + 1</span></span><br><span class="line">    <span class="comment">// num += 1</span></span><br><span class="line">    <span class="comment">// // 1. 前置自增</span></span><br><span class="line">    <span class="comment">// let i = 1</span></span><br><span class="line">    <span class="comment">// ++i</span></span><br><span class="line">    <span class="comment">// console.log(i)</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// let i = 1</span></span><br><span class="line">    <span class="comment">// console.log(++i + 1)</span></span><br><span class="line">    <span class="comment">// 2. 后置自增</span></span><br><span class="line">    <span class="comment">// let i = 1</span></span><br><span class="line">    <span class="comment">// i++</span></span><br><span class="line">    <span class="comment">// console.log(i)</span></span><br><span class="line">    <span class="comment">// let i = 1</span></span><br><span class="line">    <span class="comment">// console.log(i++ + 1)</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// 了解 </span></span><br><span class="line">    <span class="keyword">let</span> i = <span class="number">1</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(i++ + ++i + i)</span><br><span class="line">  &lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>比较运算符</strong></p>
<p>使用场景：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）</p>
<table>
<thead>
<tr>
<th>运算符</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>&gt;</td>
<td>左边是否大于右边</td>
</tr>
<tr>
<td>&lt;</td>
<td>左边是否小于右边</td>
</tr>
<tr>
<td>&gt;=</td>
<td>左边是否大于或等于右边</td>
</tr>
<tr>
<td>&lt;=</td>
<td>左边是否小于或等于右边</td>
</tr>
<tr>
<td>===</td>
<td>左右两边是否<code>类型</code>和<code>值</code>都相等（重点）</td>
</tr>
<tr>
<td>==</td>
<td>左右两边<code>值</code>是否相等</td>
</tr>
<tr>
<td>!=</td>
<td>左右值不相等</td>
</tr>
<tr>
<td>!==</td>
<td>左右两边是否不全等</td>
</tr>
</tbody></table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">3</span> &gt; <span class="number">5</span>)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">3</span> &gt;= <span class="number">3</span>)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span> == <span class="number">2</span>)</span><br><span class="line">  <span class="comment">// 比较运算符有隐式转换 把&#x27;2&#x27; 转换为 2  双等号 只判断值</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span> == <span class="string">&#x27;2&#x27;</span>)  <span class="comment">// true</span></span><br><span class="line">  <span class="comment">// console.log(undefined === null)</span></span><br><span class="line">  <span class="comment">// === 全等 判断 值 和 数据类型都一样才行</span></span><br><span class="line">  <span class="comment">// 以后判断是否相等 请用 ===  </span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span> === <span class="string">&#x27;2&#x27;</span>)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">NaN</span> === <span class="title class_">NaN</span>) <span class="comment">// NaN 不等于任何人，包括他自己</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span> !== <span class="string">&#x27;2&#x27;</span>)  <span class="comment">// true  </span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span> != <span class="string">&#x27;2&#x27;</span>) <span class="comment">// false </span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;-------------------------&#x27;</span>)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;a&#x27;</span> &lt; <span class="string">&#x27;b&#x27;</span>) <span class="comment">// true</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;aa&#x27;</span> &lt; <span class="string">&#x27;ab&#x27;</span>) <span class="comment">// true</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;aa&#x27;</span> &lt; <span class="string">&#x27;aac&#x27;</span>) <span class="comment">// true</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;-------------------------&#x27;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>逻辑运算符</strong></p>
<p>使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值</p>
<table>
<thead>
<tr>
<th>符号</th>
<th>名称</th>
<th>日常读法</th>
<th>特点</th>
<th>口诀</th>
</tr>
</thead>
<tbody><tr>
<td>&amp;&amp;</td>
<td>逻辑与</td>
<td>并且</td>
<td>符号两边有一个假的结果为假</td>
<td>一假则假</td>
</tr>
<tr>
<td>||</td>
<td>逻辑或</td>
<td>或者</td>
<td>符号两边有一个真的结果为真</td>
<td>一真则真</td>
</tr>
<tr>
<td>!</td>
<td>逻辑非</td>
<td>取反</td>
<td>true变false  false变true</td>
<td>真变假，假变真</td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>A &amp;&amp; B</th>
<th>A || B</th>
<th>!A</th>
</tr>
</thead>
<tbody><tr>
<td>false</td>
<td>false</td>
<td>false</td>
<td>false</td>
<td>true</td>
</tr>
<tr>
<td>false</td>
<td>true</td>
<td>false</td>
<td>true</td>
<td>true</td>
</tr>
<tr>
<td>true</td>
<td>false</td>
<td>false</td>
<td>true</td>
<td>false</td>
</tr>
<tr>
<td>true</td>
<td>true</td>
<td>true</td>
<td>true</td>
<td>false</td>
</tr>
</tbody></table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">// 逻辑与 一假则假</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="literal">true</span> &amp;&amp; <span class="literal">true</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="literal">false</span> &amp;&amp; <span class="literal">true</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">3</span> &lt; <span class="number">5</span> &amp;&amp; <span class="number">3</span> &gt; <span class="number">2</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">3</span> &lt; <span class="number">5</span> &amp;&amp; <span class="number">3</span> &lt; <span class="number">2</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;-----------------&#x27;</span>)</span><br><span class="line">    <span class="comment">// 逻辑或 一真则真</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="literal">true</span> || <span class="literal">true</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="literal">false</span> || <span class="literal">true</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="literal">false</span> || <span class="literal">false</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;-----------------&#x27;</span>)</span><br><span class="line">    <span class="comment">// 逻辑非  取反</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(!<span class="literal">true</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(!<span class="literal">false</span>)</span><br><span class="line"></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;-----------------&#x27;</span>)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> num = <span class="number">6</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(num &gt; <span class="number">5</span> &amp;&amp; num &lt; <span class="number">10</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;-----------------&#x27;</span>)</span><br><span class="line">  &lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>运算符优先级</strong></p>
<blockquote>
<p>逻辑运算符优先级： ！&gt; &amp;&amp; &gt;  ||  </p>
</blockquote>
<h1 id="二、语句"><a href="#二、语句" class="headerlink" title="二、语句"></a>二、语句</h1><p><strong>表达式和语句</strong></p>




<h2 id="if语句"><a href="#if语句" class="headerlink" title="if语句"></a>if语句</h2><h3 id="分支语句"><a href="#分支语句" class="headerlink" title="分支语句"></a>分支语句</h3><p>分支语句可以根据条件判定真假，来选择性的执行想要的代码</p>
<p>分支语句包含：</p>
<ol>
<li>if分支语句（重点）</li>
<li>三元运算符</li>
<li>switch语句</li>
</ol>
<p><strong>if 分支语句</strong></p>
<p>语法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(条件表达式) &#123;</span><br><span class="line">  <span class="comment">// 满足条件要执行的语句</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>小括号内的条件结果是布尔值，为 true 时，进入大括号里执行代码；为false，则不执行大括号里面代码</p>
<p>小括号内的结果若不是布尔类型时，会发生类型转换为布尔值，类似Boolean()</p>
<p>如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做~</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">// 单分支语句</span></span><br><span class="line">    <span class="comment">// if (false) &#123;</span></span><br><span class="line">    <span class="comment">//   console.log(&#x27;执行语句&#x27;)</span></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line">    <span class="comment">// if (3 &gt; 5) &#123;</span></span><br><span class="line">    <span class="comment">//   console.log(&#x27;执行语句&#x27;)</span></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line">    <span class="comment">// if (2 === &#x27;2&#x27;) &#123;</span></span><br><span class="line">    <span class="comment">//   console.log(&#x27;执行语句&#x27;)</span></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line">    <span class="comment">//  1. 除了0 所有的数字都为真</span></span><br><span class="line">    <span class="comment">//   if (0) &#123;</span></span><br><span class="line">    <span class="comment">//     console.log(&#x27;执行语句&#x27;)</span></span><br><span class="line">    <span class="comment">//   &#125;</span></span><br><span class="line">    <span class="comment">// 2.除了 &#x27;&#x27; 所有的字符串都为真 true</span></span><br><span class="line">    <span class="comment">// if (&#x27;pink老师&#x27;) &#123;</span></span><br><span class="line">    <span class="comment">//   console.log(&#x27;执行语句&#x27;)</span></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line">    <span class="comment">// if (&#x27;&#x27;) &#123;</span></span><br><span class="line">    <span class="comment">//   console.log(&#x27;执行语句&#x27;)</span></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line">    <span class="comment">// // if (&#x27;&#x27;) console.log(&#x27;执行语句&#x27;)</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// 1. 用户输入</span></span><br><span class="line">    <span class="keyword">let</span> score = +<span class="title function_">prompt</span>(<span class="string">&#x27;请输入成绩&#x27;</span>)</span><br><span class="line">    <span class="comment">// 2. 进行判断输出</span></span><br><span class="line">    <span class="keyword">if</span> (score &gt;= <span class="number">700</span>) &#123;</span><br><span class="line">      <span class="title function_">alert</span>(<span class="string">&#x27;恭喜考入黑马程序员&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;-----------------&#x27;</span>)</span><br><span class="line"></span><br><span class="line">  &lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>if双分支语句</strong></p>
<p>如果有两个条件的时候，可以使用 if else 双分支语句</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (条件表达式)&#123;</span><br><span class="line">  <span class="comment">// 满足条件要执行的语句</span></span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="comment">// 不满足条件要执行的语句</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>例如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">   <span class="comment">// 1. 用户输入</span></span><br><span class="line">   <span class="keyword">let</span> uname = <span class="title function_">prompt</span>(<span class="string">&#x27;请输入用户名:&#x27;</span>)</span><br><span class="line">   <span class="keyword">let</span> pwd = <span class="title function_">prompt</span>(<span class="string">&#x27;请输入密码:&#x27;</span>)</span><br><span class="line">   <span class="comment">// 2. 判断输出</span></span><br><span class="line">   <span class="keyword">if</span> (uname === <span class="string">&#x27;pink&#x27;</span> &amp;&amp; pwd === <span class="string">&#x27;123456&#x27;</span>) &#123;</span><br><span class="line">     <span class="title function_">alert</span>(<span class="string">&#x27;恭喜登录成功&#x27;</span>)</span><br><span class="line">   &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">     <span class="title function_">alert</span>(<span class="string">&#x27;用户名或者密码错误&#x27;</span>)</span><br><span class="line">   &#125;</span><br><span class="line"> &lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>if 多分支语句</strong></p>
<p>使用场景： 适合于有多个条件的时候</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">   <span class="comment">// 1. 用户输入</span></span><br><span class="line">   <span class="keyword">let</span> score = +<span class="title function_">prompt</span>(<span class="string">&#x27;请输入成绩：&#x27;</span>)</span><br><span class="line">   <span class="comment">// 2. 判断输出</span></span><br><span class="line">   <span class="keyword">if</span> (score &gt;= <span class="number">90</span>) &#123;</span><br><span class="line">     <span class="title function_">alert</span>(<span class="string">&#x27;成绩优秀，宝贝，你是我的骄傲&#x27;</span>)</span><br><span class="line">   &#125; <span class="keyword">else</span> <span class="keyword">if</span> (score &gt;= <span class="number">70</span>) &#123;</span><br><span class="line">     <span class="title function_">alert</span>(<span class="string">&#x27;成绩良好，宝贝，你要加油哦~~&#x27;</span>)</span><br><span class="line">   &#125; <span class="keyword">else</span> <span class="keyword">if</span> (score &gt;= <span class="number">60</span>) &#123;</span><br><span class="line">     <span class="title function_">alert</span>(<span class="string">&#x27;成绩及格，宝贝，你很危险~&#x27;</span>)</span><br><span class="line">   &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">     <span class="title function_">alert</span>(<span class="string">&#x27;成绩不及格，宝贝，我不想和你说话，我只想用鞭子和你说话~&#x27;</span>)</span><br><span class="line">   &#125;</span><br><span class="line"> &lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>三元运算符（三元表达式）</strong></p>
<p><strong>使用场景</strong>： 一些简单的双分支，可以使用  三元运算符（三元表达式），写起来比 if  else双分支 更简单</p>
<p><strong>符号</strong>：? 与 : 配合使用</p>
<p>语法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">条件 ? 表达式<span class="number">1</span> ： 表达式<span class="number">2</span></span><br></pre></td></tr></table></figure>

<p>例如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 三元运算符（三元表达式）</span></span><br><span class="line"><span class="comment">// 1. 语法格式</span></span><br><span class="line"><span class="comment">// 条件 ? 表达式1 : 表达式2 </span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 执行过程 </span></span><br><span class="line"><span class="comment">// 2.1 如果条件为真，则执行表达式1</span></span><br><span class="line"><span class="comment">// 2.2 如果条件为假，则执行表达式2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 验证</span></span><br><span class="line"><span class="comment">// 5 &gt; 3 ? &#x27;真的&#x27; : &#x27;假的&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">5</span> &lt; <span class="number">3</span> ? <span class="string">&#x27;真的&#x27;</span> : <span class="string">&#x27;假的&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// let age = 18 </span></span><br><span class="line"><span class="comment">// age = age + 1</span></span><br><span class="line"><span class="comment">//  age++</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1. 用户输入 </span></span><br><span class="line"><span class="keyword">let</span> num = <span class="title function_">prompt</span>(<span class="string">&#x27;请您输入一个数字:&#x27;</span>)</span><br><span class="line"><span class="comment">// 2. 判断输出- 小于10才补0</span></span><br><span class="line"><span class="comment">// num = num &lt; 10 ? 0 + num : num</span></span><br><span class="line">num = num &gt;= <span class="number">10</span> ? num : <span class="number">0</span> + num</span><br><span class="line"><span class="title function_">alert</span>(num)</span><br></pre></td></tr></table></figure>

<p><strong>switch语句（了解）</strong></p>
<p>使用场景： 适合于有多个条件的时候，也属于分支语句，大部分情况下和 if多分支语句 功能相同</p>
<p>注意：</p>
<ol>
<li>switch case语句一般用于等值判断, if适合于区间判断</li>
<li>switchcase一般需要配合break关键字使用 没有break会造成case穿透</li>
<li>if 多分支语句开发要比switch更重要，使用也更多</li>
</ol>
<p>例如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// switch分支语句</span></span><br><span class="line"><span class="comment">// 1. 语法</span></span><br><span class="line"><span class="comment">// switch (表达式) &#123;</span></span><br><span class="line"><span class="comment">//   case 值1:</span></span><br><span class="line"><span class="comment">//     代码1</span></span><br><span class="line"><span class="comment">//     break</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//   case 值2:</span></span><br><span class="line"><span class="comment">//     代码2</span></span><br><span class="line"><span class="comment">//     break</span></span><br><span class="line"><span class="comment">//   ...</span></span><br><span class="line"><span class="comment">//   default:</span></span><br><span class="line"><span class="comment">//     代码n</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  <span class="keyword">switch</span> (<span class="number">2</span>) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;您选择的是1&#x27;</span>)</span><br><span class="line">    <span class="keyword">break</span>  <span class="comment">// 退出switch</span></span><br><span class="line">    <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;您选择的是2&#x27;</span>)</span><br><span class="line">    <span class="keyword">break</span>  <span class="comment">// 退出switch</span></span><br><span class="line">    <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;您选择的是3&#x27;</span>)</span><br><span class="line">    <span class="keyword">break</span>  <span class="comment">// 退出switch</span></span><br><span class="line">    <span class="attr">default</span>:</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;没有符合条件的&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>断点调试</strong></p>
<p><strong>作用：</strong>学习时可以帮助更好的理解代码运行，工作时可以更快找到bug</p>
<p>浏览器打开调试界面</p>
<ol>
<li>按F12打开开发者工具</li>
<li>点到源代码一栏 （ sources ）</li>
<li>选择代码文件</li>
</ol>
<p><strong>断点：</strong>在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来</p>
<p><strong>循环语句</strong></p>
<p>使用场景：重复执行 指定的一段代码，比如我们想要输出10次 ‘我学的很棒’</p>
<p>学习路径：</p>
<p>1.while循环</p>
<p>2.for 循环（重点）</p>
<p><strong>while循环</strong></p>
<p>while :  在…. 期间， 所以 while循环 就是在满足条件期间，重复执行某些代码。</p>
<p><strong>语法：</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">while</span> (条件表达式) &#123;</span><br><span class="line">   <span class="comment">// 循环体    </span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>例如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// while循环: 重复执行代码</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1. 需求: 利用循环重复打印3次 &#x27;月薪过万不是梦，毕业时候见英雄&#x27;</span></span><br><span class="line"><span class="keyword">let</span> i = <span class="number">1</span></span><br><span class="line"><span class="keyword">while</span> (i &lt;= <span class="number">3</span>) &#123;</span><br><span class="line">  <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&#x27;月薪过万不是梦，毕业时候见英雄~&lt;br&gt;&#x27;</span>)</span><br><span class="line">  i++   <span class="comment">// 这里千万不要忘了变量自增否则造成死循环</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>循环三要素：</p>
<p>1.初始值 （经常用变量）</p>
<p>2.终止条件</p>
<p>3.变量的变化量</p>
<p>例如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">  <span class="comment">// // 1. 变量的起始值</span></span><br><span class="line">  <span class="comment">// let i = 1</span></span><br><span class="line">  <span class="comment">// // 2. 终止条件</span></span><br><span class="line">  <span class="comment">// while (i &lt;= 3) &#123;</span></span><br><span class="line">  <span class="comment">//   document.write(&#x27;我要循环三次 &lt;br&gt;&#x27;)</span></span><br><span class="line">  <span class="comment">//   // 3. 变量的变化量</span></span><br><span class="line">  <span class="comment">//   i++</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line">  <span class="comment">// 1. 变量的起始值</span></span><br><span class="line">  <span class="keyword">let</span> end = +<span class="title function_">prompt</span>(<span class="string">&#x27;请输入次数:&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> i = <span class="number">1</span></span><br><span class="line"><span class="comment">// 2. 终止条件</span></span><br><span class="line"><span class="keyword">while</span> (i &lt;= end) &#123;</span><br><span class="line">  <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&#x27;我要循环三次 &lt;br&gt;&#x27;</span>)</span><br><span class="line">  <span class="comment">// 3. 变量的变化量</span></span><br><span class="line">  i++</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>中止循环</strong></p>
<p><code>break</code>   中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率）  </p>
<p><code>continue</code>  中止本次循环，一般用于排除或者跳过某一个选项的时候</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">// let i = 1</span></span><br><span class="line">    <span class="comment">// while (i &lt;= 5) &#123;</span></span><br><span class="line">    <span class="comment">//   console.log(i)</span></span><br><span class="line">    <span class="comment">//   if (i === 3) &#123;</span></span><br><span class="line">    <span class="comment">//     break  // 退出循环</span></span><br><span class="line">    <span class="comment">//   &#125;</span></span><br><span class="line">    <span class="comment">//   i++</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> i = <span class="number">1</span></span><br><span class="line">    <span class="keyword">while</span> (i &lt;= <span class="number">5</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (i === <span class="number">3</span>) &#123;</span><br><span class="line">        i++</span><br><span class="line">        <span class="keyword">continue</span></span><br><span class="line">      &#125;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span><br><span class="line">      i++</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">  &lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>无限循环</strong></p>
<p>1.while(true) 来构造“无限”循环，需要使用break退出循环。（常用）</p>
<p>2.for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 无限循环  </span></span><br><span class="line"><span class="comment">// 需求： 页面会一直弹窗询问你爱我吗？</span></span><br><span class="line"><span class="comment">// (1). 如果用户输入的是 &#x27;爱&#x27;，则退出弹窗</span></span><br><span class="line"><span class="comment">// (2). 否则一直弹窗询问</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1. while(true) 无限循环</span></span><br><span class="line"><span class="comment">// while (true) &#123;</span></span><br><span class="line"><span class="comment">//   let love = prompt(&#x27;你爱我吗?&#x27;)</span></span><br><span class="line"><span class="comment">//   if (love === &#x27;爱&#x27;) &#123;</span></span><br><span class="line"><span class="comment">//     break</span></span><br><span class="line"><span class="comment">//   &#125;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. for(;;) 无限循环</span></span><br><span class="line"><span class="keyword">for</span> (; ;) &#123;</span><br><span class="line">  <span class="keyword">let</span> love = <span class="title function_">prompt</span>(<span class="string">&#x27;你爱我吗?&#x27;</span>)</span><br><span class="line">  <span class="keyword">if</span> (love === <span class="string">&#x27;爱&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">break</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="综合案例-ATM存取款机"><a href="#综合案例-ATM存取款机" class="headerlink" title="综合案例-ATM存取款机"></a>综合案例-ATM存取款机</h2>



<p>分析：</p>
<p>①：提示输入框写到循环里面（无限循环）</p>
<p>②：用户输入4则退出循环 break</p>
<p>③：提前准备一个金额预先存储一个数额 money</p>
<p>④：根据输入不同的值，做不同的操作</p>
<p>​     (1)  取钱则是减法操作， 存钱则是加法操作，查看余额则是直接显示金额</p>
<p>​     (2) 可以使用 if else if 多分支 来执行不同的操作</p>
<p>完整代码：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">  <span class="comment">// 1. 开始循环 输入框写到 循环里面</span></span><br><span class="line">  <span class="comment">// 3. 准备一个总的金额</span></span><br><span class="line">  <span class="keyword">let</span> money = <span class="number">100</span></span><br><span class="line"><span class="keyword">while</span> (<span class="literal">true</span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> re = +<span class="title function_">prompt</span>(<span class="string">`</span></span><br><span class="line"><span class="string">请您选择操作：</span></span><br><span class="line"><span class="string">1.存钱</span></span><br><span class="line"><span class="string">2.取钱</span></span><br><span class="line"><span class="string">3.查看余额</span></span><br><span class="line"><span class="string">4.退出</span></span><br><span class="line"><span class="string">`</span>)</span><br><span class="line">  <span class="comment">// 2. 如果用户输入的 4 则退出循环， break  写到if 里面，没有写到switch里面， 因为4需要break退出循环</span></span><br><span class="line">  <span class="keyword">if</span> (re === <span class="number">4</span>) &#123;</span><br><span class="line">    <span class="keyword">break</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 4. 根据输入做操作</span></span><br><span class="line">  <span class="keyword">switch</span> (re) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">      <span class="comment">// 存钱</span></span><br><span class="line">      <span class="keyword">let</span> cun = +<span class="title function_">prompt</span>(<span class="string">&#x27;请输入存款金额&#x27;</span>)</span><br><span class="line">      money = money + cun</span><br><span class="line">      <span class="keyword">break</span></span><br><span class="line">      <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">      <span class="comment">// 存钱</span></span><br><span class="line">      <span class="keyword">let</span> qu = +<span class="title function_">prompt</span>(<span class="string">&#x27;请输入取款金额&#x27;</span>)</span><br><span class="line">      money = money - qu</span><br><span class="line">      <span class="keyword">break</span></span><br><span class="line">      <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">      <span class="comment">// 存钱</span></span><br><span class="line">      <span class="title function_">alert</span>(<span class="string">`您的银行卡余额是<span class="subst">$&#123;money&#125;</span>`</span>)</span><br><span class="line">      <span class="keyword">break</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>if 多分支语句和 switch的区别：</strong></p>
<ol>
<li><p>共同点</p>
<ul>
<li>都能实现多分支选择， 多选1 </li>
<li>大部分情况下可以互换</li>
</ul>
</li>
<li><p>区别：</p>
<ul>
<li>switch…case语句通常处理case为比较<strong>确定值</strong>的情况，而if…else…语句更加灵活，通常用于<strong>范围判断</strong>(大于，等于某个范围)。</li>
<li>switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次</li>
<li>switch 一定要注意 必须是 ===  全等，一定注意 数据类型，同时注意break否则会有穿透效果</li>
<li>结论：<ul>
<li>当分支比较少时，if…else语句执行效率高。</li>
<li>当分支比较多时，switch语句执行效率高，而且结构更清晰。</li>
</ul>
</li>
</ul>
</li>
</ol>
<h2 id="for-语句"><a href="#for-语句" class="headerlink" title="for 语句"></a>for 语句</h2><blockquote>
<p>掌握 for 循环语句，让程序具备重复执行能力</p>
</blockquote>
<p><code>for</code> 是 JavaScript 提供的另一种循环控制的话句，它和 <code>while</code> 只是语法上存在差异。</p>
<p><strong>for语句的基本使用</strong></p>
<ol>
<li>实现循环的 3 要素</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 1. 语法格式</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// for(起始值; 终止条件; 变化量) &#123;</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">//   // 要重复执行的代码</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 2. 示例：在网页中输入标题标签</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 起始值为 1</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 变化量 i++</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 终止条件 i &lt;= 6</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">1</span>; i &lt;= <span class="number">6</span>; i++) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">`&lt;h<span class="subst">$&#123;i&#125;</span>&gt;循环控制，即重复执行&lt;h<span class="subst">$&#123;i&#125;</span>&gt;`</span>)</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>变化量和死循环，<code>for</code> 循环和 <code>while</code> 一样，如果不合理设置增量和终止条件，便会产生死循环。</li>
</ol>
<ol start="3">
<li>跳出和终止循环</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. continue </span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">1</span>; i &lt;= <span class="number">5</span>; i++) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">if</span> (i === <span class="number">3</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">continue</span>  <span class="comment">// 结束本次循环，继续下一次循环</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. break</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">1</span>; i &lt;= <span class="number">5</span>; i++) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">if</span> (i === <span class="number">3</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">break</span>  <span class="comment">// 退出结束整个循环</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>结论：</p>
<ul>
<li><code>JavaScript</code> 提供了多种语句来实现循环控制，但无论使用哪种语句都离不开循环的3个特征，即起始值、变化量、终止条件，做为初学者应着重体会这3个特征，不必过多纠结三种语句的区别。</li>
<li>起始值、变化量、终止条件，由开发者根据逻辑需要进行设计，规避死循环的发生。</li>
<li>当如果明确了循环的次数的时候推荐使用<code>for</code>循环,当不明确循环的次数的时候推荐使用<code>while</code>循环</li>
</ul>
<blockquote>
<p>注意：<code>for</code> 的语法结构更简洁，故 <code>for</code> 循环的使用频次会更多。</p>
</blockquote>
<p><strong>循环嵌套</strong></p>
<p>利用循环的知识来对比一个简单的天文知识，我们知道地球在自转的同时也在围绕太阳公转，如果把自转和公转都看成是循环的话，就相当于是循环中又嵌套了另一个循环。</p>


<p>实际上 JavaScript 中任何一种循环语句都支持循环的嵌套，如下代码所示：</p>


<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">// 1. 外面的循环 记录第n天 </span><br><span class="line">for (let i = 1; i &lt; 4; i++) &#123;</span><br><span class="line">    document.write(`第$&#123;i&#125;天 <span class="tag">&lt;<span class="name">br</span>&gt;</span>`)</span><br><span class="line">    // 2. 里层的循环记录 几个单词</span><br><span class="line">    for (let j = 1; j &lt; 6; j++) &#123;</span><br><span class="line">        document.write(`记住第$&#123;j&#125;个单词<span class="tag">&lt;<span class="name">br</span>&gt;</span>`)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>记住，外层循环循环一次，里层循环循环全部</p>
<p><strong>倒三角</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 外层打印几行</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">1</span>; i &lt;= <span class="number">5</span>; i++) &#123;</span><br><span class="line">    <span class="comment">// 里层打印几个星星</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> j = <span class="number">1</span>; j &lt;= i; j++) &#123;</span><br><span class="line">        <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&#x27;★&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&#x27;&lt;br&gt;&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

 

<p><strong>九九乘法表</strong></p>
<p>样式css</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">span</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">5px</span> <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid pink;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">2px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">2px</span> <span class="number">2px</span> <span class="number">2px</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">192</span>, <span class="number">203</span>, .<span class="number">4</span>);</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">192</span>, <span class="number">203</span>, .<span class="number">1</span>);</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">color</span>: hotpink;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>javascript </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 外层打印几行</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">1</span>; i &lt;= <span class="number">9</span>; i++) &#123;</span><br><span class="line">    <span class="comment">// 里层打印几个星星</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> j = <span class="number">1</span>; j &lt;= i; j++) &#123;</span><br><span class="line">        <span class="comment">// 只需要吧 ★ 换成  1 x 1 = 1   </span></span><br><span class="line">        <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;div&gt; <span class="subst">$&#123;j&#125;</span> x <span class="subst">$&#123;i&#125;</span> = <span class="subst">$&#123;j * i&#125;</span> &lt;/div&gt;</span></span><br><span class="line"><span class="string">     `</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&#x27;&lt;br&gt;&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>





<h1 id="三、数组"><a href="#三、数组" class="headerlink" title="三、数组"></a>三、数组</h1><blockquote>
<p>知道什么是数组及其应用的场景，掌握数组声明及访问的语法。</p>
</blockquote>
<h2 id="数组定义"><a href="#数组定义" class="headerlink" title="数组定义"></a>数组定义</h2><p><strong>数组：</strong>(Array)是一种可以按顺序保存数据的数据类型</p>
<p><strong>使用场景：</strong>如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便</p>
<p><strong>数组的基本使用</strong></p>
<p><strong>定义数组和数组单元</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 1. 语法，使用 [] 来定义一个空数组</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 定义一个空数组，然后赋值给变量 classes</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// let classes = [];</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 2. 定义非空数组</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> classes = [<span class="string">&#x27;小明&#x27;</span>, <span class="string">&#x27;小刚&#x27;</span>, <span class="string">&#x27;小红&#x27;</span>, <span class="string">&#x27;小丽&#x27;</span>, <span class="string">&#x27;小米&#x27;</span>]</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>通过 <code>[]</code> 定义数组，数据中可以存放真正的数据，如小明、小刚、小红等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。</p>
<h2 id="访问数组和数组索引"><a href="#访问数组和数组索引" class="headerlink" title="访问数组和数组索引"></a>访问数组和数组索引</h2><p>使用数组存放数据并不是最终目的，关键是能够随时的访问到数组中的数据（单元）。其实 JavaScript 为数组中的每一个数据单元都编了号，通过数据单元在数组中的编号便可以轻松访问到数组中的数据单元了。</p>
<p>我们将数据单元在数组中的编号称为索引值，也有人称其为下标。</p>
<p>索引值实际是按着数据单元在数组中的位置依次排列的，注意是从<code> 0</code> 开始的，如下图所示：</p>


<p>观察上图可以数据单元【小明】对应的索引值为【0】，数据单元【小红】对应的索引值为【2】</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> classes = [<span class="string">&#x27;小明&#x27;</span>, <span class="string">&#x27;小刚&#x27;</span>, <span class="string">&#x27;小红&#x27;</span>, <span class="string">&#x27;小丽&#x27;</span>, <span class="string">&#x27;小米&#x27;</span>]</span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 1. 访问数组，语法格式为：变量名[索引值]</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">document</span>.<span class="title function_">write</span>(classes[<span class="number">0</span>]) <span class="comment">// 结果为：小明</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">document</span>.<span class="title function_">write</span>(classes[<span class="number">1</span>]) <span class="comment">// 结果为：小刚</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">document</span>.<span class="title function_">write</span>(classes[<span class="number">4</span>]) <span class="comment">// 结果为：小米</span></span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 2. 通过索引值还可以为数组单重新赋值</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">document</span>.<span class="title function_">write</span>(classes[<span class="number">3</span>]) <span class="comment">// 结果为：小丽</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 重新为索引值为 3 的单元赋值</span></span></span><br><span class="line"><span class="language-javascript">  classes[<span class="number">3</span>] = <span class="string">&#x27;小小丽&#x27;</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">document</span>.<span class="title function_">wirte</span>(classes[<span class="number">3</span>]); <span class="comment">// 结果为： 小小丽</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="数据单元值类型"><a href="#数据单元值类型" class="headerlink" title="数据单元值类型"></a>数据单元值类型</h2><p>数组做为数据的集合，它的单元值可以是任意数据类型</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 6. 数组单值类型可以是任意数据类型</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// a) 数组单元值的类型为字符类型</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> list = [<span class="string">&#x27;HTML&#x27;</span>, <span class="string">&#x27;CSS&#x27;</span>, <span class="string">&#x27;JavaScript&#x27;</span>]</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// b) 数组单元值的类型为数值类型</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> scores = [<span class="number">78</span>, <span class="number">84</span>, <span class="number">70</span>, <span class="number">62</span>, <span class="number">75</span>]</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// c) 混合多种类型</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> mixin = [<span class="literal">true</span>, <span class="number">1</span>, <span class="literal">false</span>, <span class="string">&#x27;hello&#x27;</span>]</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="数组长度属性"><a href="#数组长度属性" class="headerlink" title="数组长度属性"></a>数组长度属性</h2><p>重申一次，数组在 JavaScript 中并不是新的数据类型，它属于对象类型。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 定义一个数组</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> arr = [<span class="string">&#x27;html&#x27;</span>, <span class="string">&#x27;css&#x27;</span>, <span class="string">&#x27;javascript&#x27;</span>]</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 数组对应着一个 length 属性，它的含义是获取数组的长度</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="property">length</span>) <span class="comment">// 3</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="操作数组"><a href="#操作数组" class="headerlink" title="操作数组"></a>操作数组</h2><p>数组做为对象数据类型，不但有 <code>length</code> 属性可以使用，还提供了许多方法：</p>
<ol>
<li>push 动态向数组的尾部添加一个单元</li>
<li>unshit 动态向数组头部添加一个单元</li>
<li>pop 删除最后一个单元</li>
<li>shift 删除第一个单元</li>
<li>splice 动态删除任意单元</li>
</ol>
<p>使用以上4个方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时 <code>length</code> 并不会发生错乱。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 定义一个数组</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> arr = [<span class="string">&#x27;html&#x27;</span>, <span class="string">&#x27;css&#x27;</span>, <span class="string">&#x27;javascript&#x27;</span>]</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 1. push 动态向数组的尾部添加一个单元</span></span></span><br><span class="line"><span class="language-javascript">  arr.<span class="title function_">push</span>(<span class="string">&#x27;Nodejs&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr)</span></span><br><span class="line"><span class="language-javascript">  arr.<span class="title function_">push</span>(<span class="string">&#x27;Vue&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 2. unshit 动态向数组头部添加一个单元</span></span></span><br><span class="line"><span class="language-javascript">  arr.<span class="title function_">unshift</span>(<span class="string">&#x27;VS Code&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 3. splice 动态删除任意单元</span></span></span><br><span class="line"><span class="language-javascript">  arr.<span class="title function_">splice</span>(<span class="number">2</span>, <span class="number">1</span>) <span class="comment">// 从索引值为2的位置开始删除1个单元</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 4. pop 删除最后一个单元</span></span></span><br><span class="line"><span class="language-javascript">  arr.<span class="title function_">pop</span>()</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 5. shift 删除第一个单元</span></span></span><br><span class="line"><span class="language-javascript">  arr.<span class="title function_">shift</span>()</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="forEach遍历数组"><a href="#forEach遍历数组" class="headerlink" title="forEach遍历数组"></a>forEach遍历数组</h2><p>forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数</p>
<blockquote>
<p>注意：  </p>
<p>1.forEach 主要是遍历数组</p>
<p>2.参数当前数组元素是必须要写的， 索引号可选。</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// forEach 就是遍历  加强版的for循环  适合于遍历数组对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> arr = [<span class="string">&#x27;red&#x27;</span>, <span class="string">&#x27;green&#x27;</span>, <span class="string">&#x27;pink&#x27;</span>]</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> result = arr.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">item, index</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(item)  <span class="comment">// 数组元素 red  green pink</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(index) <span class="comment">// 索引号 0 1 2</span></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(result)</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="map遍历数组"><a href="#map遍历数组" class="headerlink" title="map遍历数组"></a>map遍历数组</h2><p><strong>使用场景：</strong></p>
<p>map 可以遍历数组处理数据，并且返回新的数组</p>
<p><strong>语法：</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">const</span> arr = [<span class="string">&#x27;red&#x27;</span>, <span class="string">&#x27;blue&#x27;</span>, <span class="string">&#x27;pink&#x27;</span>]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">// 1. 数组 map方法 处理数据并且 返回一个数组</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">   <span class="keyword">const</span> newArr = arr.<span class="title function_">map</span>(<span class="keyword">function</span> (<span class="params">ele, index</span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// console.log(ele)  // 数组元素</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// console.log(index) // 索引号</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> ele + index;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	&#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="variable language_">console</span>.<span class="title function_">log</span>(newArr)	<span class="comment">// [&#x27;red0&#x27;, &#x27;blue1&#x27;, &#x27;pink2&#x27;]</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line">&lt;/body&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。</p>
<p>map重点在于有返回值，forEach没有返回值（undefined）</p>
</blockquote>
<h2 id="filter筛选数组"><a href="#filter筛选数组" class="headerlink" title="filter筛选数组"></a>filter筛选数组</h2><p>filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素</p>
<p>主要使用场景： <strong>筛选数组符合条件的元素，并返回筛选之后元素的新数组</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> arr = [<span class="number">10</span>, <span class="number">20</span>, <span class="number">30</span>]</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 返回过滤出符合条件的新数组</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const newArr = arr.filter(function (item, index) &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   // console.log(item) // 10 20 30</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   // console.log(index) // 0 1 2</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   return item &gt;= 20</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;)</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 简写形式</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> newArr = arr.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> item &gt;= <span class="number">20</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(newArr) <span class="comment">// 20 30</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="join转字符串"><a href="#join转字符串" class="headerlink" title="join转字符串"></a>join转字符串</h2><p><strong>作用：</strong>join() 方法用于把数组中的所有元素转换为一个字符串</p>
<p><strong>语法：</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> arr = [<span class="string">&#x27;red&#x27;</span>, <span class="string">&#x27;blue&#x27;</span>, <span class="string">&#x27;pink&#x27;</span>]</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 数组 map方法 处理数据并且 返回一个数组</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> newArr = arr.<span class="title function_">map</span>(<span class="keyword">function</span> (<span class="params">ele, index</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// console.log(ele)  // 数组元素</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// console.log(index) // 索引号</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">return</span> ele + <span class="string">&#x27;颜色&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(newArr)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 数组join方法  把数组转换为字符串</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 小括号为空则逗号分割</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(newArr.<span class="title function_">join</span>())  <span class="comment">// red颜色,blue颜色,pink颜色</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 小括号是空字符串，则元素之间没有分隔符</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(newArr.<span class="title function_">join</span>(<span class="string">&#x27;&#x27;</span>))  <span class="comment">//red颜色blue颜色pink颜色</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(newArr.<span class="title function_">join</span>(<span class="string">&#x27;|&#x27;</span>))  <span class="comment">//red颜色|blue颜色|pink颜色</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="reduce数组求和"><a href="#reduce数组求和" class="headerlink" title="reduce数组求和"></a>reduce数组求和</h2><p>reduce <strong>返回累积处理的结果</strong>，经常用于求和等</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// arr.reduce(function(上一次值，当前值)&#123;&#125;, 初始值)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> arr = [<span class="number">1</span>,<span class="number">5</span>,<span class="number">8</span>]</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 没有初始值</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> sum = arr.<span class="title function_">reduce</span>(<span class="keyword">function</span>(<span class="params">pre, current</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">return</span> pre + current</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(sum) <span class="comment">// 14</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 上一次值		当前值		返回值（第一次循环）</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//	 1			5			6 （第二次循环）</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//	 6			8			14</span></span></span><br><span class="line"><span class="language-javascript">      </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 有初始值</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> sum2 = arr.<span class="title function_">reduce</span>(<span class="keyword">function</span>(<span class="params">pre, current</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">return</span> pre + current</span></span><br><span class="line"><span class="language-javascript">    &#125;, <span class="number">10</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(sum2) <span class="comment">// 24</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 上一次值		当前值		返回值（第一次循环）</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//	 10			1			11 （第二次循环）</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//	 11			5			16 （第三次循环）</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//	 16			8			24</span></span></span><br><span class="line"><span class="language-javascript">      </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 箭头函数写法</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> sum3 = arr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">pre, current</span>) =&gt;</span> pre + current, <span class="number">5</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(sum3) <span class="comment">// 19</span></span></span><br><span class="line"><span class="language-javascript">      </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 如果是对象数组，则初始值为0不可省略</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> arr2 = [</span></span><br><span class="line"><span class="language-javascript">        &#123;<span class="attr">name</span>: <span class="string">&#x27;张三&#x27;</span>, <span class="attr">salary</span>: <span class="number">10000</span>&#125;,</span></span><br><span class="line"><span class="language-javascript">        &#123;<span class="attr">name</span>: <span class="string">&#x27;李四&#x27;</span>, <span class="attr">salary</span>: <span class="number">10000</span>&#125;,</span></span><br><span class="line"><span class="language-javascript">        &#123;<span class="attr">name</span>: <span class="string">&#x27;王五&#x27;</span>, <span class="attr">salary</span>: <span class="number">10000</span>&#125;</span></span><br><span class="line"><span class="language-javascript">    ]</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> sums = arr2.<span class="title function_">reduce</span>(<span class="keyword">function</span>(<span class="params">pre, current</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">return</span> pre + current.<span class="property">salary</span></span></span><br><span class="line"><span class="language-javascript">    &#125;, <span class="number">0</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(sums) <span class="comment">// 30000</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>原理：</p>
<ol>
<li>如果没有起始值，则上一次值为数组的第一个元素值</li>
<li>每一次新循环，上一次值为上次循环的返回值</li>
<li>如果有起始值，则起始值为上一次值</li>
</ol>


<h2 id="find查找数组"><a href="#find查找数组" class="headerlink" title="find查找数组"></a>find查找数组</h2><p>find查找元素，<strong>返回符合测试条件的 第一个 数组元素值</strong>，如果没有则返回 undefined</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  	<span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    	<span class="keyword">const</span> arr = [<span class="string">&#x27;red&#x27;</span>, <span class="string">&#x27;blue&#x27;</span>, <span class="string">&#x27;green&#x27;</span>]</span></span><br><span class="line"><span class="language-javascript">    	<span class="keyword">const</span> findArr = arr.<span class="title function_">find</span>(<span class="keyword">function</span> (<span class="params">item</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">      		<span class="keyword">return</span> item === <span class="string">&#x27;blue&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    	&#125;)</span></span><br><span class="line"><span class="language-javascript">    	<span class="variable language_">console</span>.<span class="title function_">log</span>(findArr) <span class="comment">// blue</span></span></span><br><span class="line"><span class="language-javascript">        </span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> arr2 = [</span></span><br><span class="line"><span class="language-javascript">            &#123;<span class="attr">name</span>: <span class="string">&#x27;小米&#x27;</span>, <span class="attr">price</span>: <span class="number">1999</span>&#125;,</span></span><br><span class="line"><span class="language-javascript">            &#123;<span class="attr">name</span>: <span class="string">&#x27;华为&#x27;</span>, <span class="attr">price</span>: <span class="number">2888</span>&#125;</span></span><br><span class="line"><span class="language-javascript">        ]</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 从众多数据里找到小米这个对象</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> mi = arr2.<span class="title function_">find</span>(<span class="keyword">function</span>(<span class="params">item</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">return</span> item.<span class="property">name</span> === <span class="string">&#x27;小米&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(mi) <span class="comment">// &#123;name: &#x27;小米&#x27;, price: 1999&#125;</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 箭头函数写法</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> mi2 = arr2.<span class="title function_">find</span>(<span class="function"><span class="params">item</span> =&gt;</span> item.<span class="property">name</span> === <span class="string">&#x27;华为&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(mi2) <span class="comment">// &#123;name: &#x27;华为&#x27;, price: 2888&#125;</span></span></span><br><span class="line"><span class="language-javascript">  	</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>更多API请查看官方文档：</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find</a></p>


<h2 id="常用字符串函数"><a href="#常用字符串函数" class="headerlink" title="常用字符串函数"></a>常用字符串函数</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  	<span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// split()：将字符串分割为数组，与 join() 相反</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> str = <span class="string">&#x27;pink,red&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">split</span>(<span class="string">&#x27;,&#x27;</span>)) <span class="comment">// [&#x27;pink&#x27;,&#x27;red&#x27;]</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> str2 = <span class="string">&#x27;2023-07-28&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(str2.<span class="title function_">split</span>(<span class="string">&#x27;-&#x27;</span>)) <span class="comment">// [&#x27;2023&#x27;,&#x27;07&#x27;,&#x27;28&#x27;]</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// substring(开始，结束)：字符串的截取</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> str3 = <span class="string">&#x27;今天又要做核酸了&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 只有开始索引则默认取到最后</span></span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(str3.<span class="title function_">substring</span>(<span class="number">5</span>)) <span class="comment">// 核酸了</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 不包含结束索引</span></span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(str3.<span class="title function_">substring</span>(<span class="number">5</span>,<span class="number">7</span>)) <span class="comment">// 核酸</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// startsWith()：判断当前字符串是否以另外一个给定的子字符串开头,结果返回布尔值</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> a = <span class="string">&#x27;pink老师上课中&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="title function_">startsWith</span>(<span class="string">&#x27;ink&#x27;</span>)) <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// includes()：判断一个数组是否包含指定值（区分大小写）,结果返回布尔值</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> b = <span class="string">&#x27;pink老师上课中&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(b.<span class="title function_">includes</span>(<span class="string">&#x27;ink&#x27;</span>)) <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">     </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>练习：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 将字符串渲染成下图这种形式</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> str = <span class="string">&#x27;50g茶叶,清洗球&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// const a = str.split(&#x27;,&#x27;).map(function (item) &#123;</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//   return `&lt;span&gt;【赠品】 $&#123;item&#125;&lt;/span&gt;&lt;br&gt;`</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// &#125;).join(&#x27;&#x27;)</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// document.querySelector(&#x27;div&#x27;).innerHTML = a</span></span></span><br><span class="line"><span class="language-javascript">  		<span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>).<span class="property">innerHTML</span> = str.<span class="title function_">split</span>(<span class="string">&#x27;,&#x27;</span>).<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =&gt;</span> <span class="string">`&lt;span&gt;【赠品】 <span class="subst">$&#123;item&#125;</span>&lt;/span&gt;&lt;br&gt;`</span>).<span class="title function_">join</span>(<span class="string">&#x27;&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>





<h1 id="四、函数"><a href="#四、函数" class="headerlink" title="四、函数"></a>四、函数</h1><blockquote>
<p>理解封装的意义，能够通过函数的声明实现逻辑的封装，知道对象数据类型的特征，结合数学对象实现简单计算功能。</p>
</blockquote>
<ul>
<li>理解函数的封装的特征</li>
<li>掌握函数声明的语法</li>
<li>理解什么是函数的返回值</li>
<li>知道并能使用常见的内置函数</li>
</ul>
<h2 id="声明和调用"><a href="#声明和调用" class="headerlink" title="声明和调用"></a>声明和调用</h2><p>函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。</p>
<h3 id="声明（定义）"><a href="#声明（定义）" class="headerlink" title="声明（定义）"></a>声明（定义）</h3><p>声明（定义）一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分</p>


<h3 id="调用"><a href="#调用" class="headerlink" title="调用"></a>调用</h3><p>声明（定义）的函数必须调用才会真正被执行，使用 <code>()</code> 调用函数。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 声明和调用<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 声明（定义）了最简单的函数，既没有形式参数，也没有返回值</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">sayHi</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;嗨~&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 函数调用，这些函数体内的代码逻辑会被执行</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 函数名()</span></span></span><br><span class="line"><span class="language-javascript">        </span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">sayHi</span>()</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 可以重复被调用，多少次都可以</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">sayHi</span>()</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>注：函数名的命名规则与变量是一致的，并且尽量保证函数名的语义。</p>
</blockquote>
<p>小案例： 小星星</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">        <span class="comment">// 函数声明</span></span><br><span class="line">        <span class="keyword">function</span> <span class="title function_">sayHi</span>(<span class="params"></span>) &#123;</span><br><span class="line">            <span class="comment">// document.write(&#x27;hai~&#x27;)</span></span><br><span class="line">            <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">`*&lt;br&gt;`</span>)</span><br><span class="line">            <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">`**&lt;br&gt;`</span>)</span><br><span class="line">            <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">`***&lt;br&gt;`</span>)</span><br><span class="line">            <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">`****&lt;br&gt;`</span>)</span><br><span class="line">            <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">`*****&lt;br&gt;`</span>)</span><br><span class="line">            <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">`******&lt;br&gt;`</span>)</span><br><span class="line">            <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">`*******&lt;br&gt;`</span>)</span><br><span class="line">            <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">`********&lt;br&gt;`</span>)</span><br><span class="line">            <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">`*********&lt;br&gt;`</span>)</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 函数调用</span></span><br><span class="line">        <span class="title function_">sayHi</span>()</span><br><span class="line">        <span class="title function_">sayHi</span>()</span><br><span class="line">        <span class="title function_">sayHi</span>()</span><br><span class="line">        <span class="title function_">sayHi</span>()</span><br><span class="line">        <span class="title function_">sayHi</span>()</span><br><span class="line">    &lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h2 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h2><p>通过向函数传递参数，可以让函数更加灵活多变，参数可以理解成是一个变量。</p>
<p>声明（定义）一个功能为打招呼的函数</p>
<ul>
<li>传入数据列表</li>
<li>声明这个函数需要传入几个数据</li>
<li>多个数据用逗号隔开</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 函数参数<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 声明（定义）一个功能为打招呼的函数</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// function sayHi() &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   console.log(&#x27;嗨~&#x27;)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 调用函数</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// sayHi()</span></span></span><br><span class="line"><span class="language-javascript">	</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 这个函数似乎没有什么价值，除非能够向不同的人打招呼</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 这就需要借助参数来实现了</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">sayHi</span>(<span class="params">name</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 参数 name 可以被理解成是一个变量</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(name)</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;嗨~&#x27;</span> + name)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 调用 sayHi 函数，括号中多了 &#x27;小明&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 这时相当于为参数 name 赋值了</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">sayHi</span>(<span class="string">&#x27;小明&#x27;</span>)<span class="comment">// 结果为 小明</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 再次调用 sayHi 函数，括号中多了 &#x27;小红&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 这时相当于为参数 name 赋值了</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">sayHi</span>(<span class="string">&#x27;小红&#x27;</span>) <span class="comment">// 结果为 小红</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>声明（定义）函数时的形参没有数量限制，当有多个形参时使用 <code>,</code> 分隔</li>
<li>调用函数传递的实参要与形参的顺序一致</li>
</ol>
<h3 id="默认值"><a href="#默认值" class="headerlink" title="默认值"></a>默认值</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 设置参数默认值</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">sayHi</span>(<span class="params">name=<span class="string">&quot;小明&quot;</span>, age=<span class="number">18</span></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">`&lt;p&gt;大家好，我叫<span class="subst">$&#123;name&#125;</span>，我今年<span class="subst">$&#123;age&#125;</span>岁了。&lt;/p&gt;`</span>);</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 调用函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">sayHi</span>();</span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">sayHi</span>(<span class="string">&#x27;小红&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">sayHi</span>(<span class="string">&#x27;小刚&#x27;</span>, <span class="number">21</span>);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>声明函数时为形参赋值即为参数的默认值</li>
<li>如果参数未自定义默认值时，参数的默认值为 <code>undefined</code></li>
<li>调用函数时没有传入对应实参时，参数的默认值被当做实参传入</li>
</ol>
<h3 id="形参和实参"><a href="#形参和实参" class="headerlink" title="形参和实参"></a>形参和实参</h3><p>形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）</p>
<p>实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）</p>
<p>形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值</p>
<p>开发中尽量保持形参和实参个数一致</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 函数参数<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 声明（定义）一个计算任意两数字和的函数</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 形参 x 和 y 分别表示任意两个数字，它们是两个变量</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">count</span>(<span class="params">x, y</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(x + y);</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 调用函数，传入两个具体的数字做为实参</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 此时 10 赋值给了形参 x</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 此时 5  赋值给了形参 y</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">count</span>(<span class="number">10</span>, <span class="number">5</span>); <span class="comment">// 结果为 15</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="动态参数"><a href="#动态参数" class="headerlink" title="动态参数"></a>动态参数</h3><p><code>arguments</code> 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 求和函数，计算所有参数的和</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(arguments)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> s = <span class="number">0</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="variable language_">arguments</span>.<span class="property">length</span>; i++) &#123;</span></span><br><span class="line"><span class="language-javascript">      s += <span class="variable language_">arguments</span>[i]</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(s)</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 调用求和函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">sum</span>(<span class="number">5</span>, <span class="number">10</span>)<span class="comment">// 两个参数：15</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">sum</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">4</span>) <span class="comment">// 三个参数：7</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li><code>arguments</code> 是一个伪数组</li>
<li><code>arguments</code> 的作用是动态获取函数的实参</li>
</ol>
<h3 id="剩余参数"><a href="#剩余参数" class="headerlink" title="剩余参数"></a>剩余参数</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">config</span>(<span class="params">baseURL, ...other</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(baseURL) <span class="comment">// 得到 &#x27;http://baidu.com&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(other)  <span class="comment">// other  得到 [&#x27;get&#x27;, &#x27;json&#x27;]</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 调用函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">config</span>(<span class="string">&#x27;http://baidu.com&#x27;</span>, <span class="string">&#x27;get&#x27;</span>, <span class="string">&#x27;json&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li><code>...</code> 是语法符号，置于最末函数形参之前，用于获取多余的实参</li>
<li>借助 <code>...</code> 获取的剩余实参，是个真数组</li>
</ol>
<h2 id="返回值"><a href="#返回值" class="headerlink" title="返回值"></a>返回值</h2><p>函数的本质是封装（包裹），函数体内的逻辑执行完毕后，函数外部如何获得函数内部的执行结果呢？要想获得函数内部逻辑的执行结果，需要通过 <code>return</code> 这个关键字，将内部执行结果传递到函数外部，这个被传递到外部的结果就是返回值。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 函数返回值<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 定义求和函数</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">count</span>(<span class="params">a, b</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">let</span> s = a + b</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// s 即为 a + b 的结果</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 通过 return 将 s 传递到外部</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">return</span> s</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 调用函数，如果一个函数有返回值</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 那么可将这个返回值赋值给外部的任意变量</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> total = <span class="title function_">count</span>(<span class="number">5</span>, <span class="number">12</span>)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>在函数体中使用return 关键字能将内部的执行结果交给函数外部使用</li>
<li>函数内部只能出现1 次 return，并且 return 下一行代码不会再被执行，所以return 后面的数据不要换行写</li>
<li>return会立即结束当前函数</li>
<li>函数可以没有return，这种情况默认返回值为 undefined</li>
</ol>
<h2 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h2><p>作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。</p>
<h3 id="全局作用域"><a href="#全局作用域" class="headerlink" title="全局作用域"></a>全局作用域</h3><p><code>&lt;script&gt;</code> 标签和 <code>.js</code> 文件的【最外层】就是所谓的全局作用域，在此声明的变量在函数内部也可以被访问。</p>
<p>处于全局作用域内的变量，称为全局变量</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 此处是全局</span></span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">sayHi</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 此处为局部</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 此处为全局</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>全局作用域中声明的变量，任何其它作用域都可以被访问，如下代码所示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 全局变量 name</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> name = <span class="string">&#x27;小明&#x27;</span></span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  	<span class="comment">// 函数作用域中访问全局</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">sayHi</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 此处为局部</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;你好&#x27;</span> + name)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 全局变量 flag 和 x</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> flag = <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> x = <span class="number">10</span></span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  	<span class="comment">// 块作用域中访问全局</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">if</span>(flag) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">let</span> y = <span class="number">5</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(x + y) <span class="comment">// x 是全局的</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>为 <code>window</code> 对象动态添加的属性默认也是全局的，不推荐！</li>
<li>函数中未使用任何关键字声明的变量为全局变量，不推荐！！！</li>
<li>尽可能少的声明全局变量，防止全局变量被污染</li>
</ol>
<p>JavaScript 中的作用域是程序被执行时的底层机制，了解这一机制有助于规范代码书写习惯，避免因作用域导致的语法错误。</p>
<h3 id="局部作用域"><a href="#局部作用域" class="headerlink" title="局部作用域"></a>局部作用域</h3><p>作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。</p>
<p>处于局部作用域内的变量称为局部变量</p>
<p>在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。</p>
<p>不同函数内部声明的变量无法互相访问</p>
<p>函数执行完毕后，函数内部的变量实际被清空了</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 声明 counter 函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">counter</span>(<span class="params">x, y</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 函数内部声明的变量</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> s = x + y</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(s) <span class="comment">// 18</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 设用 counter 函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">counter</span>(<span class="number">10</span>, <span class="number">8</span>)</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 访问变量 s</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(s)<span class="comment">// 报错</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="块级作用域"><a href="#块级作用域" class="headerlink" title="块级作用域"></a>块级作用域</h3><p>在 JavaScript 中使用 <code>&#123;&#125;</code> 包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// age 只能在该代码块中被访问</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> age = <span class="number">18</span>;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(age); <span class="comment">// 正常</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 超出了 age 的作用域</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(age) <span class="comment">// 报错</span></span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> flag = <span class="literal">true</span>;</span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">if</span>(flag) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// str 只能在该代码块中被访问</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> str = <span class="string">&#x27;hello world!&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(str); <span class="comment">// 正常</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 超出了 age 的作用域</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(str); <span class="comment">// 报错</span></span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">for</span>(<span class="keyword">let</span> t = <span class="number">1</span>; t &lt;= <span class="number">6</span>; t++) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// t 只能在该代码块中被访问</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(t); <span class="comment">// 正常</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 超出了 t 的作用域</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(t); <span class="comment">// 报错</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>JavaScript 中除了变量外还有常量，常量与变量本质的区别是【常量必须要有值且不允许被重新赋值】，常量值为对象时其属性和方法允许重新赋值。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 必须要有值</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> version = <span class="string">&#x27;1.0.0&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 不能重新赋值</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// version = &#x27;1.0.1&#x27;;</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 常量值为对象类型</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> user = &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">name</span>: <span class="string">&#x27;小明&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">age</span>: <span class="number">18</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 不能重新赋值</span></span></span><br><span class="line"><span class="language-javascript">  user = &#123;&#125;;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 属性和方法允许被修改</span></span></span><br><span class="line"><span class="language-javascript">  user.<span class="property">name</span> = <span class="string">&#x27;小小明&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">  user.<span class="property">gender</span> = <span class="string">&#x27;男&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li><code>let</code> 声明的变量会产生块作用域，<code>var</code> 不会产生块作用域</li>
<li><code>const</code> 声明的常量也会产生块作用域</li>
<li>不同代码块之间的变量无法互相访问</li>
<li>推荐使用 <code>let</code> 或 <code>const</code></li>
</ol>
<p>注：开发中 <code>let</code> 和 <code>const</code> 经常不加区分的使用，如果担心某个值会不小被修改时，则只能使用 <code>const</code> 声明成常量。</p>
<h3 id="作用域链"><a href="#作用域链" class="headerlink" title="作用域链"></a>作用域链</h3><p>在解释什么是作用域链前先来看一段代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 全局作用域</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> a = <span class="number">1</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> b = <span class="number">2</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 局部作用域</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">f</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> c</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 局部作用域</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">g</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">let</span> d = <span class="string">&#x27;yo&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>函数内部允许创建新的函数，<code>f</code> 函数内部创建的新函数 <code>g</code>，会产生新的函数作用域，由此可知作用域产生了嵌套的关系。</p>
<p>如下图所示，父子关系的作用域关联在一起形成了链状的结构，作用域链的名字也由此而来。</p>
<p>作用域链本质上是底层的变量查找机制，在函数被执行时，会优先查找当前函数作用域中查找变量，如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域，如下代码所示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 全局作用域</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> a = <span class="number">1</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> b = <span class="number">2</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 局部作用域</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">f</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> c</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// let a = 10;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a) <span class="comment">// 1 或 10</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(d) <span class="comment">// 报错</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 局部作用域</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">g</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">let</span> d = <span class="string">&#x27;yo&#x27;</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// let b = 20;</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(b) <span class="comment">// 2 或 20</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 调用 g 函数</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">g</span>()</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(c) <span class="comment">// 报错</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(d) <span class="comment">// 报错</span></span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">f</span>();</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>嵌套关系的作用域串联起来形成了作用域链</li>
<li>相同作用域链中按着从小到大的规则查找变量</li>
<li>子作用域能够访问父作用域，父级作用域无法访问子级作用域</li>
</ol>
<h2 id="匿名函数"><a href="#匿名函数" class="headerlink" title="匿名函数"></a>匿名函数</h2><p>函数可以分为具名函数和匿名函数</p>
<p>匿名函数：没有名字的函数,无法直接使用。</p>
<h2 id="函数表达式"><a href="#函数表达式" class="headerlink" title="函数表达式"></a>函数表达式</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明</span></span><br><span class="line"><span class="keyword">let</span> fn = <span class="keyword">function</span>(<span class="params"></span>) &#123; </span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;函数表达式&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 调用</span></span><br><span class="line"><span class="title function_">fn</span>()</span><br></pre></td></tr></table></figure>

<h2 id="立即执行函数"><a href="#立即执行函数" class="headerlink" title="立即执行函数"></a>立即执行函数</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">(<span class="keyword">function</span>(<span class="params"></span>)&#123; xxx  &#125;)();</span><br><span class="line">(<span class="keyword">function</span>(<span class="params"></span>)&#123;xxxx&#125;());</span><br></pre></td></tr></table></figure>

<blockquote>
<p>无需调用，立即执行，其实本质已经调用了</p>
<p>多个立即执行函数之间用分号隔开</p>
</blockquote>
<h2 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h2><p>闭包是一种比较特殊的函数，使用闭包能够访问函数作用域中的变量。从代码形式上看闭包是一个做为返回值的函数，如下代码所示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 闭包 : 内层函数 + 外层函数变量</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// function outer() &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   const a = 1</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   function f() &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//     console.log(a)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   f()</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// outer()</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 闭包的应用： 实现数据的私有。统计函数的调用次数</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// let count = 1</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// function fn() &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   count++</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   console.log(`函数被调用$&#123;count&#125;次`)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 3. 闭包的写法  统计函数的调用次数</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">outer</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">let</span> count = <span class="number">1</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        count++</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`函数被调用<span class="subst">$&#123;count&#125;</span>次`</span>)</span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">return</span> fn</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> re = <span class="title function_">outer</span>()</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const re = function fn() &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   count++</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   console.log(`函数被调用$&#123;count&#125;次`)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">re</span>()</span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">re</span>()</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const fn = function() &#123; &#125;  函数表达式</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 4. 闭包存在的问题： 可能会造成内存泄漏</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<p>1.怎么理解闭包？</p>
<ul>
<li>闭包 = 内层函数 + 外层函数的变量</li>
</ul>
<p>2.闭包的作用？</p>
<ul>
<li>封闭数据，实现数据私有，外部也可以访问函数内部的变量</li>
<li>闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来</li>
</ul>
<p>3.闭包可能引起的问题？</p>
<ul>
<li>内存泄漏</li>
</ul>
<h2 id="变量提升"><a href="#变量提升" class="headerlink" title="变量提升"></a>变量提升</h2><p>变量提升是 JavaScript 中比较“奇怪”的现象，它允许在变量声明之前即被访问，</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 访问变量 str</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(str); <span class="comment">// undefined</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 声明变量 str</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">var</span> str = <span class="string">&#x27;hello &#x27;</span>;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>变量在未声明即被访问时会报语法错误</li>
<li>变量在声明之前即被访问，变量的值为 <code>undefined</code></li>
<li><code>let</code> 声明的变量不存在变量提升，推荐使用 <code>let</code></li>
<li>变量提升出现在相同作用域当中</li>
<li>实际开发中推荐先声明再访问变量</li>
</ol>
<p>注：关于变量提升的原理分析会涉及较为复杂的词法分析等知识，而开发中使用 <code>let</code> 可以轻松规避变量的提升，因此在此不做过多的探讨，有兴趣可<a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000013915935">查阅资料</a>。</p>
<h2 id="函数提升"><a href="#函数提升" class="headerlink" title="函数提升"></a>函数提升</h2><p>函数提升与变量提升比较类似，是指函数在声明之前即可被调用。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 调用函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">foo</span>()</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 声明函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;声明之前即被调用...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 不存在提升现象</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">bar</span>()  <span class="comment">// 错误: bar is not a function</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">var</span> bar = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;函数表达式不存在提升现象...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>函数提升能够使函数的声明调用更灵活</li>
<li>函数表达式不存在提升的现象</li>
<li>函数提升出现在相同作用域当中</li>
</ol>
<h2 id="剩余函数or展开运算符"><a href="#剩余函数or展开运算符" class="headerlink" title="剩余函数or展开运算符"></a>剩余函数or展开运算符</h2>

<h2 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h2><p>箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const fn = function () &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   console.log(123)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 箭头函数 基本语法</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const fn = () =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   console.log(123)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// fn()</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const fn = (x) =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   console.log(x)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// fn(1)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 只有一个形参的时候，可以省略小括号</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const fn = x =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   console.log(x)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// fn(1)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// // 3. 只有一行代码的时候，我们可以省略大括号</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const fn = x =&gt; console.log(x)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// fn(1)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 4. 只有一行代码的时候，可以省略return</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const fn = x =&gt; x + x</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(fn(1))</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 5. 箭头函数可以直接返回一个对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const fn = (uname) =&gt; (&#123; uname: uname &#125;)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(fn(&#x27;刘德华&#x27;))</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>箭头函数属于表达式函数，因此不存在函数提升</li>
<li>箭头函数只有一个参数时可以省略圆括号 <code>()</code></li>
<li>箭头函数函数体只有一行代码时可以省略花括号 <code>&#123;&#125;</code>，并自动做为返回值被返回</li>
</ol>
<h3 id="箭头函数参数"><a href="#箭头函数参数" class="headerlink" title="箭头函数参数"></a>箭头函数参数</h3><p>箭头函数中没有 <code>arguments</code>，只能使用 <code>...</code> 动态获取实参</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 利用箭头函数来求和</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> <span class="title function_">getSum</span> = (<span class="params">...arr</span>) =&gt; &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">let</span> sum = <span class="number">0</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span></span><br><span class="line"><span class="language-javascript">        sum += arr[i]</span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">return</span> sum</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> result = <span class="title function_">getSum</span>(<span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(result) <span class="comment">// 9</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="箭头函数-this"><a href="#箭头函数-this" class="headerlink" title="箭头函数 this"></a>箭头函数 this</h3><p>箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// 以前this的指向：  谁调用的这个函数，this 就指向谁</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// console.log(this)  // window</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// // 普通函数</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// function fn() &#123;</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">//   console.log(this)  // window</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// window.fn()</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// // 对象方法里面的this</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// const obj = &#123;</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">//   name: &#x27;andy&#x27;,</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">//   sayHi: function () &#123;</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">//     console.log(this)  // obj</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">//   &#125;</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// obj.sayHi()</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// 2. 箭头函数的this  是上一层作用域的this 指向</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// const fn = () =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">//   console.log(this)  // window</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// fn()</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// 对象方法箭头函数 this</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// const obj = &#123;</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">//   uname: &#x27;pink老师&#x27;,</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">//   sayHi: () =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">//     console.log(this)  // this 指向谁？ window</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">//   &#125;</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// obj.sayHi()</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">   <span class="keyword">const</span> obj = &#123;</span></span><br><span class="line"><span class="language-javascript">     <span class="attr">uname</span>: <span class="string">&#x27;pink老师&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">     <span class="attr">sayHi</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">       <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)  <span class="comment">// obj</span></span></span><br><span class="line"><span class="language-javascript">       <span class="keyword">let</span> i = <span class="number">10</span></span></span><br><span class="line"><span class="language-javascript">       <span class="keyword">const</span> <span class="title function_">count</span> = (<span class="params"></span>) =&gt; &#123;</span></span><br><span class="line"><span class="language-javascript">         <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)  <span class="comment">// obj </span></span></span><br><span class="line"><span class="language-javascript">       &#125;</span></span><br><span class="line"><span class="language-javascript">       <span class="title function_">count</span>()</span></span><br><span class="line"><span class="language-javascript">     &#125;</span></span><br><span class="line"><span class="language-javascript">   &#125;</span></span><br><span class="line"><span class="language-javascript">   obj.<span class="title function_">sayHi</span>()</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="解构赋值"><a href="#解构赋值" class="headerlink" title="解构赋值"></a>解构赋值</h2><p>解构赋值是一种<strong>快速为变量赋值</strong>的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型。</p>
<h3 id="数组解构"><a href="#数组解构" class="headerlink" title="数组解构"></a>数组解构</h3><p>数组解构是<strong>将数组的单元值快速批量赋值给一系列变量</strong>的简洁语法，如下代码所示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 普通的数组</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 批量声明变量 a b c </span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 同时将数组单元值 1 2 3 依次赋值给变量 a b c</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> [a, b, c] = arr</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 1</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 2</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 3</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 多余的变量将被赋值为 undefined</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> [A,B,C,D] = arr</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(A,B,C,D); <span class="comment">// 1,2,3,undefind</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 可以通过 `...` 获取剩余单元值，但只能置于最末位</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> [x,...y] = arr</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(x,y) <span class="comment">// 1,[2,3]</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 多维数组解构</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> arr2 = [<span class="number">1</span>,<span class="number">2</span>,[<span class="number">3</span>,<span class="number">4</span>]]</span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> [a,b,c] = arr2</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(a) <span class="comment">// 1</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(b) <span class="comment">// 2</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(c) <span class="comment">// [3,4]</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> [a,b,[c,d]] = arr2</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(c) <span class="comment">// 3</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(d) <span class="comment">// 4</span></span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 数组对象解构</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> person = [</span></span><br><span class="line"><span class="language-javascript">      &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="attr">name</span>: <span class="string">&#x27;佩奇&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">          <span class="attr">family</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">              <span class="attr">mother</span>: <span class="string">&#x27;猪妈&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">              <span class="attr">father</span>: <span class="string">&#x27;猪爸&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">              <span class="attr">sister</span>: <span class="string">&#x27;乔治&#x27;</span></span></span><br><span class="line"><span class="language-javascript">          &#125;,</span></span><br><span class="line"><span class="language-javascript">          <span class="attr">age</span>: <span class="number">6</span></span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">  ]</span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> [&#123;name, <span class="attr">family</span>: &#123;mother, father, sister &#125;&#125;] = person</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(name) <span class="comment">// 佩奇</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(mother) <span class="comment">// 猪妈</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(father) <span class="comment">// 猪爸</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(sister) <span class="comment">// 乔治</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>赋值运算符 <code>=</code> 左侧的 <code>[]</code> 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量</li>
<li>变量的顺序对应数组单元值的位置依次进行赋值操作</li>
<li>变量的数量大于单元值数量时，多余的变量将被赋值为  <code>undefined</code></li>
<li>变量的数量小于单元值数量时，可以通过 <code>...</code> 获取剩余单元值，但只能置于最末位</li>
<li>允许初始化变量的默认值，且只有单元值为 <code>undefined</code> 时默认值才会生效</li>
<li>立即执行函数 (function(){})() 跟 数组解构 都需要在前面加上分号，避免跟上一行没加分号代码粘连</li>
<li>支持多维解构赋值，比较复杂后续有应用需求时再进一步分析</li>
</ol>
<p>例：</p>






<h3 id="对象解构"><a href="#对象解构" class="headerlink" title="对象解构"></a>对象解构</h3><p>对象解构是<strong>将对象属性和方法快速批量赋值给一系列变量</strong>的简洁语法，如下代码所示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 普通对象</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> user = &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">name</span>: <span class="string">&#x27;小明&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">age</span>: <span class="number">18</span></span></span><br><span class="line"><span class="language-javascript">  &#125;;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 批量声明变量 name age</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 同时将数组单元值 小明  18 依次赋值给变量 name  age</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> &#123;name, age&#125; = user</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(name) <span class="comment">// 小明</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(age) <span class="comment">// 18</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>赋值运算符 <code>=</code> 左侧的 <code>&#123;&#125;</code> 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量</li>
<li>对象属性的值将被赋值给与属性名相同的变量名</li>
<li>对象中找不到与变量名一致的属性时变量值为 <code>undefined</code></li>
<li>允许初始化变量的默认值，属性不存在或单元值为 <code>undefined</code> 时默认值才会生效</li>
<li>支持多维对象解构赋值，如下所示</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 这是后台传递过来的数据</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> msg = &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="string">&quot;code&quot;</span>: <span class="number">200</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="string">&quot;msg&quot;</span>: <span class="string">&quot;获取新闻列表成功&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="string">&quot;data&quot;</span>: [</span></span><br><span class="line"><span class="language-javascript">        &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="string">&quot;id&quot;</span>: <span class="number">1</span>,</span></span><br><span class="line"><span class="language-javascript">          <span class="string">&quot;title&quot;</span>: <span class="string">&quot;5G商用自己，三大运用商收入下降&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">          <span class="string">&quot;count&quot;</span>: <span class="number">58</span></span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="string">&quot;id&quot;</span>: <span class="number">2</span>,</span></span><br><span class="line"><span class="language-javascript">          <span class="string">&quot;title&quot;</span>: <span class="string">&quot;国际媒体头条速览&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">          <span class="string">&quot;count&quot;</span>: <span class="number">56</span></span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="string">&quot;id&quot;</span>: <span class="number">3</span>,</span></span><br><span class="line"><span class="language-javascript">          <span class="string">&quot;title&quot;</span>: <span class="string">&quot;乌克兰和俄罗斯持续冲突&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">          <span class="string">&quot;count&quot;</span>: <span class="number">1669</span></span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">      ]</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 直接解构： 请将以上msg对象  采用对象解构的方式 只选出  data 方面后面使用渲染页面</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const &#123; data &#125; = msg</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(data)</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 通过函数传参解构： 上面msg是后台传递过来的数据，我们需要把data选出当做参数传递给 函数</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const &#123; data &#125; = msg</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// msg 虽然很多属性，但是我们利用解构只要 data值</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">render</span>(<span class="params">&#123; data &#125;</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// const &#123; data &#125; = arr</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 我们只要 data 数据</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 内部处理</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">render</span>(msg)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 起别名来解构：为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myData</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const &#123; data: myData &#125; = msg</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(myData)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">render</span>(<span class="params">&#123; data: myData &#125;</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 要求将 获取过来的 data数据 更名为 myData</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 内部处理</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(myData)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">render</span>(msg)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h1 id="五、对象"><a href="#五、对象" class="headerlink" title="五、对象"></a>五、对象</h1><blockquote>
<p>对象是 JavaScript 数据类型的一种，之前已经学习了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。本节需知道对象数据类型的特征，能够利用数组对象渲染页面</p>
</blockquote>
<ul>
<li>理解什么是对象，掌握定义对象的语法</li>
<li>掌握数学对象的使用</li>
</ul>
<h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2><p>声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 对象语法<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 声明字符串类型变量</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> str = <span class="string">&#x27;hello world!&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 声明数值类型变量</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> num = <span class="number">199</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 声明对象类型变量，使用一对花括号</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// user 便是一个对象了，目前它是一个空对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> user = &#123;&#125;</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="属性和访问"><a href="#属性和访问" class="headerlink" title="属性和访问"></a>属性和访问</h2><p>数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。</p>
<ol>
<li>属性都是成 对出现的，包括属性名和值，它们之间使用英文 <code>:</code> 分隔</li>
<li>多个属性之间使用英文 <code>,</code> 分隔</li>
<li>属性就是依附在对象上的变量</li>
<li>属性名可以使用 <code>&quot;&quot;</code> 或 <code>&#39;&#39;</code>，一般情况下省略，除非名称遇到特殊符号如空格、中横线等</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 对象语法<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 通过对象描述一个人的数据信息</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// person 是一个对象，它包含了一个属性 name</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 属性都是成对出现的，属性名 和 值，它们之间使用英文 : 分隔</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> person = &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">name</span>: <span class="string">&#x27;小明&#x27;</span>, <span class="comment">// 描述人的姓名</span></span></span><br><span class="line"><span class="language-javascript">      <span class="attr">age</span>: <span class="number">18</span>, <span class="comment">// 描述人的年龄</span></span></span><br><span class="line"><span class="language-javascript">      <span class="attr">stature</span>: <span class="number">185</span>, <span class="comment">// 描述人的身高</span></span></span><br><span class="line"><span class="language-javascript">      <span class="attr">gender</span>: <span class="string">&#x27;男&#x27;</span>, <span class="comment">// 描述人的性别</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>声明对象，并添加了若干属性后，可以使用 <code>.</code> 或 <code>[]</code> 获得对象中属性对应的值，我称之为属性访问。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 对象语法<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 通过对象描述一个人的数据信息</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// person 是一个对象，它包含了一个属性 name</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 属性都是成对出现的，属性名 和 值，它们之间使用英文 : 分隔</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> person = &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">name</span>: <span class="string">&#x27;小明&#x27;</span>, <span class="comment">// 描述人的姓名</span></span></span><br><span class="line"><span class="language-javascript">      <span class="attr">age</span>: <span class="number">18</span>, <span class="comment">// 描述人的年龄</span></span></span><br><span class="line"><span class="language-javascript">      <span class="attr">stature</span>: <span class="number">185</span>, <span class="comment">// 描述人的身高</span></span></span><br><span class="line"><span class="language-javascript">      <span class="attr">gender</span>: <span class="string">&#x27;男&#x27;</span>, <span class="comment">// 描述人的性别</span></span></span><br><span class="line"><span class="language-javascript">    &#125;;</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 访问人的名字</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">name</span>) <span class="comment">// 结果为 小明</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 访问人性别</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">gender</span>) <span class="comment">// 结果为 男</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 访问人的身高</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(person[<span class="string">&#x27;stature&#x27;</span>]) <span class="comment">// 结果为 185</span></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">// 或者</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">stature</span>) <span class="comment">// 结果同为 185</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>扩展：也可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 对象语法<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 声明一个空的对象（没有任何属性）</span></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">let</span> user = &#123;&#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 动态追加属性</span></span></span><br><span class="line"><span class="language-javascript">    user.<span class="property">name</span> = <span class="string">&#x27;小明&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    user[<span class="string">&#x27;age&#x27;</span>] = <span class="number">18</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 动态添加与直接定义是一样的，只是语法上更灵活</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="方法和调用"><a href="#方法和调用" class="headerlink" title="方法和调用"></a>方法和调用</h2><p>数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。</p>
<ol>
<li>方法是由方法名和函数两部分构成，它们之间使用 : 分隔</li>
<li>多个属性之间使用英文 <code>,</code> 分隔</li>
<li>方法是依附在对象中的函数</li>
<li>方法名可以使用 <code>&quot;&quot;</code> 或 <code>&#39;&#39;</code>，一般情况下省略，除非名称遇到特殊符号如空格、中横线等</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 对象方法<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 方法是依附在对象上的函数</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> person = &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">name</span>: <span class="string">&#x27;小红&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">age</span>: <span class="number">18</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 方法是由方法名和函数两部分构成，它们之间使用 : 分隔</span></span></span><br><span class="line"><span class="language-javascript">      <span class="attr">singing</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;两只老虎，两只老虎，跑的快，跑的快...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">      &#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">run</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我跑的非常快...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>声明对象，并添加了若干方法后，可以使用 <code>.</code> 或 <code>[]</code> 调用对象中函数，我称之为方法调用。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 对象方法<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 方法是依附在对象上的函数</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> person = &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">name</span>: <span class="string">&#x27;小红&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">age</span>: <span class="number">18</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 方法是由方法名和函数两部分构成，它们之间使用 : 分隔</span></span></span><br><span class="line"><span class="language-javascript">      <span class="attr">singing</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;两只老虎，两只老虎，跑的快，跑的快...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">      &#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">run</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我跑的非常快...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 调用对象中 singing 方法</span></span></span><br><span class="line"><span class="language-javascript">    person.<span class="title function_">singing</span>()</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 调用对象中的 run 方法</span></span></span><br><span class="line"><span class="language-javascript">    person.<span class="title function_">run</span>()</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>扩展：也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>JavaScript 基础 - 对象方法<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 声明一个空的对象（没有任何属性，也没有任何方法）</span></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">let</span> user = &#123;&#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 动态追加属性</span></span></span><br><span class="line"><span class="language-javascript">    user.<span class="property">name</span> = <span class="string">&#x27;小明&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    user.[<span class="string">&#x27;age&#x27;</span>] = <span class="number">18</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 动态添加方法</span></span></span><br><span class="line"><span class="language-javascript">    user.<span class="property">move</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;移动一点距离...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。</strong></p>
<h2 id="null"><a href="#null" class="headerlink" title="null"></a>null</h2><p>null 也是 JavaScript 中数据类型的一种，通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时，结果为 <code>object</code>。</p>
<h2 id="遍历对象"><a href="#遍历对象" class="headerlink" title="遍历对象"></a>遍历对象</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">uname</span>: <span class="string">&#x27;pink&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> k <span class="keyword">in</span> obj) &#123;</span><br><span class="line">    <span class="comment">// k 属性名  字符串  带引号    obj.&#x27;uname&#x27;     k ===  &#x27;uname&#x27;</span></span><br><span class="line">    <span class="comment">// obj[k]  属性值    obj[&#x27;uname&#x27;]   obj[k]</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>for in 不提倡遍历数组 因为 k 是 字符串  </p>
<h2 id="构造函数"><a href="#构造函数" class="headerlink" title="构造函数"></a>构造函数</h2><p>构造函数是专门用于创建对象的函数，如果一个函数使用 <code>new</code> 关键字调用，那么这个函数就是构造函数。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 定义函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;通过 new 也能调用函数...&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 调用函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">new</span> foo;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol start="2">
<li>使用 <code>new</code> 关键字调用函数的行为被称为实例化，可用来<strong>快速创建多个类似对象</strong></li>
<li>实例化构造函数时没有参数时可以省略 <code>()</code></li>
<li>构造函数的返回值即为新创建的对象</li>
<li>构造函数内部的 <code>return</code> 返回的值无效！</li>
</ol>
<p>注：实践中为了从视觉上区分构造函数和普通函数，习惯将构造函数的首字母大写。</p>


<h2 id="实例成员"><a href="#实例成员" class="headerlink" title="实例成员"></a>实例成员</h2><p>通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 构造函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 构造函数内部的 this 就是实例对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 实例对象中动态添加属性</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">this</span>.<span class="property">name</span> = <span class="string">&#x27;小明&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 实例对象动态添加方法</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">this</span>.<span class="property">sayHi</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;大家好~&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 实例化，p1 是实例对象</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// p1 实际就是 构造函数内部的 this</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> p1 = <span class="keyword">new</span> <span class="title class_">Person</span>()</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(p1)</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(p1.<span class="property">name</span>) <span class="comment">// 访问实例属性</span></span></span><br><span class="line"><span class="language-javascript">  p1.<span class="title function_">sayHi</span>() <span class="comment">// 调用实例方法</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>构造函数内部 <code>this</code> 实际上就是实例对象，为其动态添加的属性和方法即为实例成员</li>
<li>为构造函数传入参数，动态创建结构相同但值不同的对象</li>
</ol>
<p>注：构造函数创建的实例对象彼此独立互不影响。</p>
<h2 id="静态成员"><a href="#静态成员" class="headerlink" title="静态成员"></a>静态成员</h2><p>在 JavaScript 中底层函数本质上也是对象类型，因此允许直接为函数动态添加属性或方法，构造函数的属性和方法被称为静态成员。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 构造函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name, age</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 省略实例成员</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 静态属性</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title class_">Person</span>.<span class="property">eyes</span> = <span class="number">2</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title class_">Person</span>.<span class="property">arms</span> = <span class="number">2</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 静态方法</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title class_">Person</span>.<span class="property">walk</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;^_^人都会走路...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// this 指向 Person</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">eyes</span>)</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>静态成员指的是添加到构造函数本身的属性和方法</li>
<li>一般公共特征的属性或方法静态成员设置为静态成员</li>
<li>静态成员方法中的 <code>this</code> 指向构造函数本身</li>
</ol>
<h2 id="内置对象"><a href="#内置对象" class="headerlink" title="内置对象"></a>内置对象</h2><p>回想一下我们曾经使用过的 <code>console.log</code>，<code>console</code>其实就是 JavaScript 中内置的对象，该对象中存在一个方法叫 <code>log</code>，然后调用 <code>log</code> 这个方法，即 <code>console.log()</code>。</p>
<p>除了 <code>console</code> 对象外，JavaScritp 还有其它的内置的对象</p>
<h2 id="包装类型"><a href="#包装类型" class="headerlink" title="包装类型"></a>包装类型</h2><p>在 JavaScript 中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法，如下代码举例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 字符串类型</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> str = <span class="string">&#x27;hello world!&#x27;</span></span></span><br><span class="line"><span class="language-javascript"> 	<span class="comment">// 统计字符的长度（字符数量）</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="property">length</span>)</span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 数值类型</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> price = <span class="number">12.345</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 保留两位小数</span></span></span><br><span class="line"><span class="language-javascript">  price.<span class="title function_">toFixed</span>(<span class="number">2</span>) <span class="comment">// 12.34</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为包装类型。</p>
<h3 id="String"><a href="#String" class="headerlink" title="String"></a>String</h3><p><code>String</code> 是内置的构造函数，用于创建字符串。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 使用构造函数创建字符串</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> str = <span class="keyword">new</span> <span class="title class_">String</span>(<span class="string">&#x27;hello world!&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 字面量创建字符串</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> str2 = <span class="string">&#x27;你好，世界！&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 检测是否属于同一个构造函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="property">constructor</span> === str2.<span class="property">constructor</span>); <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(str <span class="keyword">instanceof</span> <span class="title class_">String</span>); <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>实例属性 <code>length</code> 用来获取字符串的度长(重点)</li>
<li>实例方法 <code>split(&#39;分隔符&#39;)</code> 用来将字符串拆分成数组(重点)</li>
<li>实例方法 <code>substring（需要截取的第一个字符的索引[,结束的索引号]）</code> 用于字符串截取(重点)</li>
<li>实例方法 <code>startsWith(检测字符串[, 检测位置索引号])</code> 检测是否以某字符开头(重点)</li>
<li>实例方法 <code>includes(搜索的字符串[, 检测位置索引号])</code> 判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false(重点)</li>
<li>实例方法 <code>toUpperCase</code> 用于将字母转换成大写</li>
<li>实例方法 <code>toLowerCase</code> 用于将就转换成小写</li>
<li>实例方法 <code>indexOf</code>  检测是否包含某字符</li>
<li>实例方法 <code>endsWith</code> 检测是否以某字符结尾</li>
<li>实例方法 <code>replace</code> 用于替换字符串，支持正则匹配</li>
<li>实例方法 <code>match</code> 用于查找字符串，支持正则匹配</li>
</ol>
<p>注：String 也可以当做普通函数使用，这时它的作用是强制转换成字符串数据类型。</p>
<h3 id="Number"><a href="#Number" class="headerlink" title="Number"></a>Number</h3><p><code>Number</code> 是内置的构造函数，用于创建数值。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 使用构造函数创建数值</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> x = <span class="keyword">new</span> <span class="title class_">Number</span>(<span class="string">&#x27;10&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> y = <span class="keyword">new</span> <span class="title class_">Number</span>(<span class="number">5</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 字面量创建数值</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> z = <span class="number">20</span></span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> num = <span class="number">10.923</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(num.<span class="title function_">toFixed</span>(<span class="number">1</span>)) <span class="comment">// 10.9</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> num2 = <span class="number">10</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(num2.<span class="title function_">toFixed</span>(<span class="number">2</span>)) <span class="comment">// 10.00</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>推荐使用字面量方式声明数值，而不是 <code>Number</code> 构造函数</li>
<li>实例方法 <code>toFixed</code> 用于设置保留小数位的长度</li>
</ol>
<h3 id="Math"><a href="#Math" class="headerlink" title="Math"></a>Math</h3><p><code>Math</code> 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。</p>
<p><strong>属性</strong></p>
<ul>
<li>Math.PI，获取圆周率</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 圆周率</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="property">PI</span>);</span><br></pre></td></tr></table></figure>

<p><strong>方法</strong></p>
<ul>
<li>Math.random，生成 0 到 1 间的随机数</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 0 ~ 1 之间的随机数, 包含 0 不包含 1</span></span><br><span class="line"><span class="title class_">Math</span>.<span class="title function_">random</span>()</span><br><span class="line"><span class="comment">// 生成 N~M 之间的随机数</span></span><br><span class="line"><span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * (M - N + <span class="number">1</span>)) + N</span><br></pre></td></tr></table></figure>

<ul>
<li>Math.ceil，数字向上取整</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 舍弃小数部分，整数部分加1</span></span><br><span class="line"><span class="title class_">Math</span>.<span class="title function_">ceil</span>(<span class="number">3.4</span>)</span><br></pre></td></tr></table></figure>

<ul>
<li>Math.floor，数字向下取整</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 舍弃小数部分，整数部分不变</span></span><br><span class="line"><span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="number">4.68</span>)</span><br><span class="line"><span class="comment">// 找到数组中随机的一个字符</span></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">&#x27;red&#x27;</span>, <span class="string">&#x27;green&#x27;</span>, <span class="string">&#x27;blue&#x27;</span>]</span><br><span class="line"><span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * arr.<span class="property">length</span>)</span><br></pre></td></tr></table></figure>

<ul>
<li>Math.round，四舍五入取整</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 取整，四舍五入原则</span></span><br><span class="line"><span class="title class_">Math</span>.<span class="title function_">round</span>(<span class="number">5.46539</span>)</span><br><span class="line"><span class="title class_">Math</span>.<span class="title function_">round</span>(<span class="number">4.849</span>)</span><br></pre></td></tr></table></figure>

<ul>
<li>Math.max，在一组数中找出最大的</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 找出最大值</span></span><br><span class="line"><span class="title class_">Math</span>.<span class="title function_">max</span>(<span class="number">10</span>, <span class="number">21</span>, <span class="number">7</span>, <span class="number">24</span>, <span class="number">13</span>)</span><br></pre></td></tr></table></figure>

<ul>
<li>Math.min，在一组数中找出最小的</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 找出最小值</span></span><br><span class="line"><span class="title class_">Math</span>.<span class="title function_">min</span>(<span class="number">24</span>, <span class="number">18</span>, <span class="number">6</span>, <span class="number">19</span>, <span class="number">21</span>)</span><br></pre></td></tr></table></figure>

<ul>
<li>Math.pow，幂方法</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 求某个数的多少次方</span></span><br><span class="line"><span class="title class_">Math</span>.<span class="title function_">pow</span>(<span class="number">4</span>, <span class="number">2</span>) <span class="comment">// 求 4 的 2 次方</span></span><br><span class="line"><span class="title class_">Math</span>.<span class="title function_">pow</span>(<span class="number">2</span>, <span class="number">3</span>) <span class="comment">// 求 2 的 3 次方</span></span><br></pre></td></tr></table></figure>

<ul>
<li>Math.sqrt，平方根</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 求某数的平方根</span></span><br><span class="line"><span class="title class_">Math</span>.<span class="title function_">sqrt</span>(<span class="number">16</span>)</span><br></pre></td></tr></table></figure>

<p>小例子：随机点名系统</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">let arr = [&#x27;赵云&#x27;，&#x27;马超&#x27;, &#x27;张飞&#x27;, &#x27;黄忠&#x27;, &#x27;关羽&#x27;]</span><br><span class="line">let random = Math.floor(Math.random() * arr.length)</span><br><span class="line">document.write(arr[random])</span><br></pre></td></tr></table></figure>

<p>数学对象提供了比较多的方法，这里不要求强记，通过演示数学对象的使用，加深对对象的理解。</p>
<h2 id="日期对象"><a href="#日期对象" class="headerlink" title="日期对象"></a>日期对象</h2><p>掌握 Date 日期对象的使用，动态获取当前计算机的时间。</p>
<p>ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用。</p>
<h3 id="实例化"><a href="#实例化" class="headerlink" title="实例化"></a>实例化</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 实例化</span></span><br><span class="line"><span class="comment">// const date = new Date(); // 系统默认时间</span></span><br><span class="line"><span class="keyword">const</span> date = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2020-05-01&#x27;</span>) <span class="comment">// 指定时间</span></span><br><span class="line"><span class="comment">// date 变量即所谓的时间对象</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> date)</span><br></pre></td></tr></table></figure>

<h3 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h3> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 1. 实例化</span></span><br><span class="line"><span class="keyword">const</span> date = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line"><span class="comment">// 2. 调用时间对象方法</span></span><br><span class="line"><span class="comment">// 通过方法分别获取年、月、日，时、分、秒</span></span><br><span class="line"><span class="keyword">const</span> year = date.<span class="title function_">getFullYear</span>(); <span class="comment">// 四位年份</span></span><br><span class="line"><span class="keyword">const</span> month = date.<span class="title function_">getMonth</span>(); <span class="comment">// 0 ~ 11</span></span><br></pre></td></tr></table></figure>


<p>getFullYear 获取四位年份</p>
<p>getMonth 获取月份，取值为 0 ~ 11</p>
<p>getDate 获取月份中的每一天，不同月份取值也不相同</p>
<p>getDay 获取星期，取值为 0 ~ 6</p>
<p>getHours 获取小时，取值为 0 ~ 23</p>
<p>getMinutes 获取分钟，取值为 0 ~ 59</p>
<p>getSeconds 获取秒，取值为 0 ~ 59</p>
<h3 id="时间戳"><a href="#时间戳" class="headerlink" title="时间戳"></a>时间戳</h3><p>时间戳是指1970年01月01日00时00分00秒起至现在的总秒数或毫秒数，它是一种特殊的计量时间的方式。</p>
<p>注：ECMAScript 中时间戳是以毫秒计的。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">    <span class="comment">// 1. 实例化</span></span><br><span class="line">  <span class="keyword">const</span> date = <span class="keyword">new</span> <span class="title class_">Date</span>()</span><br><span class="line">  <span class="comment">// 2. 获取时间戳</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(date.<span class="title function_">getTime</span>())</span><br><span class="line"><span class="comment">// 还有一种获取时间戳的方法</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(+<span class="keyword">new</span> <span class="title class_">Date</span>())</span><br><span class="line">  <span class="comment">// 还有一种获取时间戳的方法</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Date</span>.<span class="title function_">now</span>())</span><br><span class="line"></span><br></pre></td></tr></table></figure>


<p>获取时间戳的方法，分别为 getTime 和 Date.now 和  +new Date()</p>
<h2 id="window对象"><a href="#window对象" class="headerlink" title="window对象"></a>window对象</h2><p><strong>BOM</strong> (Browser Object Model ) 是浏览器对象模型</p>
<ul>
<li>window对象是一个全局对象，也可以说是JavaScript中的顶级对象</li>
<li>像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的</li>
<li>所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法</li>
<li>window对象下的属性和方法调用的时候可以省略window</li>
</ul>
 

<h2 id="定时器"><a href="#定时器" class="headerlink" title="定时器"></a>定时器</h2><h3 id="setTimeout-执行一次"><a href="#setTimeout-执行一次" class="headerlink" title="setTimeout() 执行一次"></a>setTimeout() 执行一次</h3><p>语法规范：window.setTimeout(调用函数，延时时间)</p>
<ol>
<li><p>setTimeout() 在调用时，window、延时时间都可以省略，延时时间单位为毫秒，省略的话默认为0</p>
</li>
<li><p>如果有很多定时器的话，可以给定时器加标示符 let timer = setTimeout(function(){},1000)</p>
</li>
<li><p>setTimeout() 也称为回调函数 callback，需要等到时间到了才去调用这个函数</p>
<p>（回调：回头调用，指上一件事干完在回头调用这个函数）</p>
<p>以前讲的 element.onclick = function(){} 或 element.addEventListener(‘click’, fn) 里面的函数也是回调函数</p>
</li>
</ol>
<h3 id="setInterval-重复执行"><a href="#setInterval-重复执行" class="headerlink" title="setInterval() 重复执行"></a>setInterval() 重复执行</h3><p>语法规范：window.setInterval(回调函数，间隔时间)，注意事项跟 setTimeout 一样</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// setTimeout()</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 书写方式一：匿名函数</span></span></span><br><span class="line"><span class="language-javascript">	<span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;时间到了&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">	&#125;,<span class="number">2000</span>)</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 书写方式二：有具体函数名</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">callback</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;时间到了&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 加了标示符的回调函数，方便后面关闭定时器用</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> timer = <span class="built_in">setTimeout</span>(callback, <span class="number">2000</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 关闭定时器</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">clearTimout</span>(timer)</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// setInterval()</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> timerId = <span class="built_in">setInterval</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;持续输出&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">	&#125;,<span class="number">2000</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 清除定时器</span></span></span><br><span class="line"><span class="language-javascript">    <span class="built_in">clearInterval</span>(timerId)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="location对象"><a href="#location对象" class="headerlink" title="location对象"></a>location对象</h2><p>location (地址) 它拆分并保存了 URL 地址的各个组成部分， 它是一个对象</p>
<table>
<thead>
<tr>
<th>属性/方法</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>href</td>
<td>属性，获取完整的 URL 地址，赋值时用于地址的跳转</td>
</tr>
<tr>
<td>search</td>
<td>属性，获取地址中携带的参数，符号 ？后面部分</td>
</tr>
<tr>
<td>hash</td>
<td>属性，获取地址中的啥希值，符号 # 后面部分</td>
</tr>
<tr>
<td>reload()</td>
<td>方法，用来刷新当前页面，传入参数 true 时表示强制刷新</td>
</tr>
</tbody></table>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;search&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">button</span>&gt;</span>搜索<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#/music&quot;</span>&gt;</span>音乐<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#/download&quot;</span>&gt;</span>下载<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;reload&quot;</span>&gt;</span>刷新页面<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// location 对象  </span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. href属性 （重点） 得到完整地址，赋值则是跳转到新地址</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(location.<span class="property">href</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// location.href = &#x27;http://www.itcast.cn&#x27;</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. search属性  得到 ? 后面的地址 </span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(location.<span class="property">search</span>)  <span class="comment">// ?search=笔记本</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 3. hash属性  得到 # 后面的地址</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(location.<span class="property">hash</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 4. reload 方法  刷新页面</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> btn = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.reload&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    btn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// location.reload() // 页面刷新</span></span></span><br><span class="line"><span class="language-javascript">      location.<span class="title function_">reload</span>(<span class="literal">true</span>) <span class="comment">// 强制页面刷新 ctrl+f5</span></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="navigator对象"><a href="#navigator对象" class="headerlink" title="navigator对象"></a>navigator对象</h2><p>navigator是对象，该对象下记录了浏览器自身的相关信息</p>
<p>常用属性和方法：</p>
<ul>
<li>通过 userAgent 检测浏览器的版本及平台（F12，切换成移动手机模式）</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 检测 userAgent（浏览器信息）</span></span><br><span class="line">(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> userAgent = navigator.<span class="property">userAgent</span></span><br><span class="line">  <span class="comment">// 验证是否为Android或iPhone</span></span><br><span class="line">  <span class="keyword">const</span> android = userAgent.<span class="title function_">match</span>(<span class="regexp">/(Android);?[\s\/]+([\d.]+)?/</span>)</span><br><span class="line">  <span class="keyword">const</span> iphone = userAgent.<span class="title function_">match</span>(<span class="regexp">/(iPhone\sOS)\s([\d_]+)/</span>)</span><br><span class="line">  <span class="comment">// 如果是Android或iPhone，则跳转至移动站点</span></span><br><span class="line">  <span class="keyword">if</span> (android || iphone) &#123;</span><br><span class="line">    location.<span class="property">href</span> = <span class="string">&#x27;http://m.itcast.cn&#x27;</span></span><br><span class="line">  &#125;&#125;)();</span><br></pre></td></tr></table></figure>

<h2 id="histroy对象"><a href="#histroy对象" class="headerlink" title="histroy对象"></a>histroy对象</h2><p>history (历史)是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退等</p>
<p><strong>使用场景</strong></p>
<p>history对象一般在实际开发中比较少用，但是会在一些OA 办公系统中见到。</p>
 

<p>常见方法：</p>
 

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;back&quot;</span>&gt;</span>←后退<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;forward&quot;</span>&gt;</span>前进→<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// histroy对象</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1.前进</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> forward = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.forward&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    forward.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// history.forward() </span></span></span><br><span class="line"><span class="language-javascript">      history.<span class="title function_">go</span>(<span class="number">1</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2.后退</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> back = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.back&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    back.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// history.back()</span></span></span><br><span class="line"><span class="language-javascript">      history.<span class="title function_">go</span>(-<span class="number">1</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="本地存储（今日重点）"><a href="#本地存储（今日重点）" class="headerlink" title="本地存储（今日重点）"></a>本地存储（今日重点）</h2><p>本地存储：将数据存储在本地浏览器中</p>
<p>常见的使用场景：</p>
<p><a target="_blank" rel="noopener" href="https://todomvc.com/examples/vanilla-es6/">https://todomvc.com/examples/vanilla-es6/</a>    页面刷新数据不丢失</p>
<p>好处：</p>
<p>1、页面刷新或者关闭不丢失数据，实现数据持久化</p>
<p>2、容量较大，sessionStorage和 localStorage 约 5M 左右</p>
<h3 id="localStorage（重点）"><a href="#localStorage（重点）" class="headerlink" title="localStorage（重点）"></a>localStorage（重点）</h3><p><strong>作用:</strong> 数据可以<strong>长期保留在本地浏览器中</strong>，<strong>刷新页面和关闭页面，数据也不会丢失</strong></p>
<p><strong>特性：****以键值对的形式存储</strong>，并且存储的是字符串， 省略了window，<strong>多窗口（页面）共享</strong>（同一浏览器可以共享）</p>


<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>本地存储-localstorage<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 本地存储 - localstorage 存储的是字符串 </span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 存储</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;age&#x27;</span>, <span class="number">18</span>) <span class="comment">// 点击F12,应用程序，存储，本地存储，就能看到本地存储的字符串</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 获取</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> <span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;age&#x27;</span>)) <span class="comment">// string</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 3. 删除</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">localStorage</span>.<span class="title function_">removeItem</span>(<span class="string">&#x27;age&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="sessionStorage（了解）"><a href="#sessionStorage（了解）" class="headerlink" title="sessionStorage（了解）"></a>sessionStorage（了解）</h3><p>特性：</p>
<ul>
<li>用法跟localStorage基本相同，在同一窗口（页面）下数据可以共享，以键值对形式存储使用</li>
<li>区别是：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除（声明周期为关闭浏览器）</li>
</ul>
<p>存储：sessionStorage.setItem(key,value)</p>
<p>获取：sessionStorage.getItem(key)</p>
<p>删除：sessionStorage.removeItem(key)</p>
<p>删除所有数据：sessionStorage.clear()</p>
<h3 id="localStorage-存储复杂数据类型"><a href="#localStorage-存储复杂数据类型" class="headerlink" title="localStorage 存储复杂数据类型"></a>localStorage 存储复杂数据类型</h3><p><strong>问题：</strong>本地只能存储字符串,无法存储复杂数据类型.</p>
<p><strong>解决：</strong>需要将复杂数据类型转换成 JSON字符串,在存储到本地</p>
<p><strong>语法：</strong>JSON.stringify(复杂数据类型)</p>
<p>JSON字符串：</p>
<ul>
<li>首先是1个字符串</li>
<li>属性名使用双引号引起来，不能单引号</li>
<li>属性值如果是字符串型也必须双引号</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 本地存储复杂数据类型</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> goods = &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">name</span>: <span class="string">&#x27;小米&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">price</span>: <span class="number">1999</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;goods&#x27;</span>, goods)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;goods&#x27;</span>)) [object <span class="title class_">Object</span>]</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 把对象转换为JSON字符串  JSON.stringify</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;goods&#x27;</span>, <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(goods))</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;goods&#x27;</span>)) <span class="comment">// &#123;&quot;name&quot;:&quot;小米&quot;,&quot;price&quot;:999&#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> <span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;goods&#x27;</span>)) <span class="comment">// string</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>



<p><strong>问题：</strong>因为本地存储里面取出来的是字符串，不是对象，无法直接使用</p>
<p>**解决： **把取出来的字符串转换为对象</p>
<p><strong>语法：</strong>JSON.parse(JSON字符串)</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 本地存储复杂数据类型</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> goods = &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">name</span>: <span class="string">&#x27;小米&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">price</span>: <span class="number">1999</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// localStorage.setItem(&#x27;goods&#x27;, goods)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(localStorage.getItem(&#x27;goods&#x27;))</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 把对象转换为JSON字符串  JSON.stringify</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;goods&#x27;</span>, <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(goods))</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(typeof localStorage.getItem(&#x27;goods&#x27;)) // string</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 把JSON字符串转换为对象  JSON.parse</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;goods&#x27;</span>))) <span class="comment">//&#123;name: &#x27;小米&#x27;, price: 999&#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;goods&#x27;</span>))) <span class="comment">// object</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="编程思想"><a href="#编程思想" class="headerlink" title="编程思想"></a>编程思想</h2><blockquote>
<p>学习 JavaScript 中基于原型的面向对象编程序的语法实现，理解面向对象编程的特征。</p>
</blockquote>
<h3 id="面向过程"><a href="#面向过程" class="headerlink" title="面向过程"></a>面向过程</h3><p>面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次</p>
<p>调用就可以了。</p>
<h3 id="面向对象"><a href="#面向对象" class="headerlink" title="面向对象"></a>面向对象</h3><p>面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。</p>
<p>在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。</p>
<p>面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。</p>
<p>面向对象的特性：</p>
<ul>
<li>封装性</li>
</ul>
<ul>
<li>继承性</li>
<li>多态性</li>
</ul>
<h2 id="构造函数-1"><a href="#构造函数-1" class="headerlink" title="构造函数"></a>构造函数</h2><p>对比以下通过面向对象的构造函数实现的封装：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">this</span>.<span class="property">name</span> = <span class="string">&#x27;佚名&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 设置名字</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">this</span>.<span class="property">setName</span> = <span class="keyword">function</span> (<span class="params">name</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">this</span>.<span class="property">name</span> = name</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 读取名字</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">this</span>.<span class="property">getName</span> = <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 实例对像，获得了构造函数中封装的所有逻辑</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> p1 = <span class="keyword">new</span> <span class="title class_">Person</span>()</span></span><br><span class="line"><span class="language-javascript">  p1.<span class="title function_">setName</span>(<span class="string">&#x27;小明&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(p1.<span class="property">name</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 实例对象</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> p2 = <span class="keyword">new</span> <span class="title class_">Person</span>()</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(p2.<span class="property">name</span>)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。</p>
<p>同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之</p>
<p>间是彼此不影响的</p>
<blockquote>
<p>总结：</p>
<ol>
<li>构造函数体现了面向对象的封装特性</li>
<li>构造函数实例创建的对象彼此独立、互不影响</li>
</ol>
</blockquote>
<p>封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。</p>
<p>前面我们学过的构造函数方法很好用，但是 存在<code>浪费内存</code>的问题</p>
<h2 id="原型对象"><a href="#原型对象" class="headerlink" title="原型对象"></a>原型对象</h2><p>构造函数通过原型分配的函数是所有对象所 共享的。</p>
<ul>
<li>JavaScript 规定，<strong>每一个构造函数都有一个 prototype 属性</strong>，指向另一个对象，所以我们也称为原型对象</li>
<li>这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存</li>
<li><strong>我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法</strong>。</li>
<li><strong>构造函数和原型对象中的this 都指向 实例化的对象</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 每个函数都有 prototype 属性</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<p>了解了 JavaScript 中构造函数与原型对象的关系后，再来看原型对象具体的作用，如下代码所示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 此处未定义任何方法</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 为构造函数的原型对象添加方法</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">sayHi</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Hi~&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">	</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 实例化</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> p1 = <span class="keyword">new</span> <span class="title class_">Person</span>();</span></span><br><span class="line"><span class="language-javascript">  p1.<span class="title function_">sayHi</span>(); <span class="comment">// 输出结果为 Hi~</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<p>构造函数 <code>Person</code> 中未定义任何方法，这时实例对象调用了原型对象中的方法 <code>sayHi</code>，接下来改动一下代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 此处定义同名方法 sayHi</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">this</span>.<span class="property">sayHi</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;嗨!&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 为构造函数的原型对象添加方法</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">sayHi</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Hi~&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> p1 = <span class="keyword">new</span> <span class="title class_">Person</span>();</span></span><br><span class="line"><span class="language-javascript">  p1.<span class="title function_">sayHi</span>(); <span class="comment">// 输出结果为 嗨!</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>构造函数 <code>Person</code> 中定义与原型对象中相同名称的方法，这时实例对象调用则是构造函中的方法 <code>sayHi</code>。</p>
<p>通过以上两个简单示例不难发现 JavaScript 中对象的工作机制：<strong>当访问对象的属性或方法时，先在当前实例对象是查找，然后再去原型对象查找，并且原型对象被所有实例共享。</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="comment">// 1。我们定义的这个方法，任何一个数组实例对象都可以使用</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 自定义的方法写到 数组.prototype 身上</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1.最大值</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">max</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 展开运算符</span></span></span><br><span class="line"><span class="language-javascript">		<span class="keyword">return</span> <span class="title class_">Math</span>.<span class="title function_">max</span>(...<span class="variable language_">this</span> )</span></span><br><span class="line"><span class="language-javascript">    	<span class="comment">// 原型函数里面的this 指向谁? 实例对象 arr</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">max</span>()) <span class="comment">// 3</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">2</span>，<span class="number">5</span>，<span class="number">9</span>].<span class="title function_">max</span>()) <span class="comment">// 9</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2.最小值</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">min</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 展开运算符</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">return</span> <span class="title class_">Math</span>.<span class="title function_">min</span>(...<span class="variable language_">this</span>)</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 原型函数里面的this 指向谁? 实例对象 arr</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">min</span>()) <span class="comment">// 1</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const arr = new Array(1，2) </span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(arr) // [1, 2]</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：<strong>结合构造函数原型的特征，实际开发重往往会将封装的功能函数添加到原型对象中。</strong></p>
<h3 id="constructor-属性"><a href="#constructor-属性" class="headerlink" title="constructor 属性"></a>constructor 属性</h3><p>在哪里？ 每个原型对象里面都有个constructor 属性（constructor 构造函数）</p>
<p>作用：该属性指向该原型对象的构造函数， 简单理解，就是指向我的爸爸，我是有爸爸的孩子</p>
<p><strong>使用场景：</strong></p>
<p>如果有多个对象的方法，我们可以给原型对象采取对象形式赋值.</p>
<p>但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了</p>
<p>此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">Star</span>(<span class="params"></span>) &#123;&#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 给构造函数的原型对象添加单个对象的方法，并不会覆盖原来的内容</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// Star.prototype.sing = function() &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//     console.log(&#x27;唱歌&#x27;)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// Star.prototype.dance = function() &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//     console.log(&#x27;跳舞&#x27;)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Star</span>.<span class="property"><span class="keyword">prototype</span></span>) <span class="comment">// &#123;constructor: f&#125; </span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 如果有多个对象的方法，则给构造函数的原型对象采取对象形式赋值，这样会覆盖原来的内容</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Star</span>.<span class="property"><span class="keyword">prototype</span></span> = &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">sing</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;唱歌&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">dance</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;跳舞&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Star</span>.<span class="property"><span class="keyword">prototype</span></span>) <span class="comment">// &#123;sing: f, dance: f&#125;，这里被覆盖了后就没有了constructor</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Star</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span>) <span class="comment">// f Object()&#123;[native code]&#125; 这里看出没有constructor了</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 将constructor指向该原型对象的构造函数Star</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Star</span>.<span class="property"><span class="keyword">prototype</span></span> = &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 重新指回创造这个原型对象的 构造函数</span></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">constructor</span>: <span class="title class_">Star</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">sing</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;唱歌&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">dance</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;跳舞&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Star</span>.<span class="property"><span class="keyword">prototype</span></span>) <span class="comment">// &#123;constructor: f, sing: f, dance: f&#125;   [[Prototype]]: Object</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="对象原型"><a href="#对象原型" class="headerlink" title="对象原型"></a>对象原型</h3><p>对象都会有一个属性 <strong>proto</strong> 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype </p>
<p>原型对象的属性和方法，就是因为对象有 <strong>proto</strong> 原型的存在。</p>
<p>注意：</p>
<ul>
<li><strong>proto</strong> 是JS非标准属性</li>
<li>[[prototype]]和__proto__意义相同</li>
<li>用来表明当前实例对象指向哪个原型对象prototype</li>
<li>__proto__对象原型里面也有一个 constructor属性，指向创建该实例对象的构造函数</li>
</ul>


<script>
    function Star() {}
    const a = new Star()
    // 原型对象__proto__ 指向 该构造函数的原型对象
    console.log(a.__proto__ === Star.prototype) // true
</script>

<h3 id="原型继承"><a href="#原型继承" class="headerlink" title="原型继承"></a>原型继承</h3><p>继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript 中大多是借助原型对象实现继承</p>
<p>的特性。</p>
<p>龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。</p>




<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 继续抽取   公共的部分放到原型上</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const Person1 = &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   eyes: 2,</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   head: 1</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const Person2 = &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   eyes: 2,</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   head: 1</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 构造函数  new 出来的对象 结构一样，但是对象不一样</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">this</span>.<span class="property">eyes</span> = <span class="number">2</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">this</span>.<span class="property">head</span> = <span class="number">1</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(new Person)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 女人  构造函数   继承  想要 继承 Person</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">Woman</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// Woman 通过原型来继承 Person</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 父构造函数（父类）   子构造函数（子类）</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 子类的原型 =  new 父类</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Woman</span>.<span class="property"><span class="keyword">prototype</span></span> = <span class="keyword">new</span> <span class="title class_">Person</span>()   <span class="comment">// &#123;eyes: 2, head: 1&#125; </span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 指回原来的构造函数</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Woman</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span> = <span class="title class_">Woman</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 给女人添加一个方法  生孩子</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Woman</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">baby</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;宝贝&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> red = <span class="keyword">new</span> <span class="title class_">Woman</span>()</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(red)	<span class="comment">// Woman |&gt; [[prototype]]:Person |&gt;  baby、constructor、eyes:2、head:1</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(Woman.prototype)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 男人 构造函数  继承  想要 继承 Person</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">Man</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 通过 原型继承 Person</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Man</span>.<span class="property"><span class="keyword">prototype</span></span> = <span class="keyword">new</span> <span class="title class_">Person</span>()</span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Man</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span> = <span class="title class_">Man</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> pink = <span class="keyword">new</span> <span class="title class_">Man</span>()</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(pink)	<span class="comment">// Man |&gt; [[prototype]]:Person |&gt;  constructor、eyes:2、head:1</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 如果写成</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const Person = &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   eyes: 2,</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   head: 1</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 则即使没有给男人添加孩子这个方法，但是还是能得到生孩子这个方法，因为：</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 男人和女人都同时使用了同一个对象 Person</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// Woman.prototype = Person</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// Man.prototype = Person</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 他们指向同一个对象，修改一个则都会被影响</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 解决方案是：</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 利用构造函数，new 出来的对象 结构一样，但是对象不一样，就能避免这样的问题,写法如下：</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// function Person() &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   this.eyes = 2</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   this.head = 1</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// Woman.prototype = new Person()</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// Man.prototype = new Person()</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="原型链"><a href="#原型链" class="headerlink" title="原型链"></a>原型链</h3><p>基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对</p>
<p>象的链状结构关系称为原型链</p>


<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// function Objetc() &#123;&#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>) <span class="comment">// &#123;constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …&#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">__proto__</span>) <span class="comment">// null</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> ldh = <span class="keyword">new</span> <span class="title class_">Person</span>()</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(ldh.__proto__ === Person.prototype)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(Person.prototype.__proto__ === Object.prototype)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(ldh <span class="keyword">instanceof</span> <span class="title class_">Person</span>) <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(ldh <span class="keyword">instanceof</span> <span class="title class_">Object</span>) <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(ldh <span class="keyword">instanceof</span> <span class="title class_">Array</span>) <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>] <span class="keyword">instanceof</span> <span class="title class_">Array</span>) <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span> <span class="keyword">instanceof</span> <span class="title class_">Object</span>) <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>① 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。</p>
<p>② 如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）</p>
<p>③ 如果还没有就查找原型对象的原型（Object的原型对象）</p>
<p>④ 依此类推一直找到 Object 为止（null）</p>
<p>⑤ __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线</p>
<p>⑥ 可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上</p>
<h1 id="六、DOM"><a href="#六、DOM" class="headerlink" title="六、DOM"></a>六、DOM</h1><blockquote>
<p>了解 DOM 的结构并掌握其基本的操作，体验 DOM 的在开发中的作用</p>
<p>知道 ECMAScript 与 JavaScript 的关系，Web APIs 是浏览器扩展的功能。</p>
</blockquote>
<ul>
<li>知道 ECMAScript 与 JavaScript 的关系</li>
<li>了解 DOM 的相关概念及DOM 的本质是一个对象</li>
<li>掌握查找节点的基本方法</li>
<li>掌握节点属性和文本的操作</li>
<li>能够使用间歇函数创建定时任务</li>
</ul>
<p>严格意义上讲，我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系，ECMAScript 简称 ES 它提供了一套语言标准规范，如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现，并且在此基础上又扩展一些实用的功能，这些被扩展出来的内容我们称为 Web APIs。</p>


<p>ECMAScript 运行在浏览器中然后再结合 Web APIs 才是真正的 JavaScript，Web APIs 的核心是 DOM 和 BOM。</p>
<p>扩展阅读：ECMAScript 规范在不断的更新中，存在多个不同的版本，早期的版本号采用数字顺序编号如 ECMAScript3、ECMAScript5，后来由于更新速度较快便采用年份做为版本号，如 ECMAScript2017、ECMAScript2018 这种格式，ECMAScript6 是 2015 年发布的，常叫做 EMCAScript2015。</p>
<p>关于 JavaScript 历史的<a target="_blank" rel="noopener" href="https://javascript.ruanyifeng.com/introduction/history.html">扩展阅读</a>。</p>
<blockquote>
<p>知道 DOM 相关的概念，建立对 DOM 的初步认识，学习 DOM 的基本操作，体会 DOM 的作用</p>
</blockquote>
<p>DOM（Document Object Model）是将整个 HTML 文档的每一个标签元素视为一个对象，这个对象下包含了许多的属性和方法，通过操作这些属性或者调用这些方法实现对 HTML 的动态更新，为实现网页特效以及用户交互提供技术支撑。</p>
<p>简言之 DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。</p>
<p>观察一个小例子：</p>


<p>上述的例子中当用户分分别点击【开始】或【结束】按钮后，通过右侧调试窗口可以观察到 html 标签的内容在不断的发生改变，这便是通过 DOM 实现的。</p>
<p><strong>概念</strong></p>
<p><strong>DOM 树</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>标题<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  文本</span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>链接名<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;&quot;</span>&gt;</span>文本<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>如下图所示，将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，<strong>文档树直观的体现了标签与标签之间的关系。</strong></p>


<h2 id="DOM-节点"><a href="#DOM-节点" class="headerlink" title="DOM 节点"></a>DOM 节点</h2><p>节点是文档树的组成部分，<strong>每一个节点都是一个 DOM 对象</strong>，主要分为元素节点、属性节点、文本节点等。</p>
<ol>
<li>【元素节点】其实就是 HTML 标签，如上图中 <code>head</code>、<code>div</code>、<code>body</code> 等都属于元素节点。</li>
<li>【属性节点】是指 HTML 标签中的属性，如上图中 <code>a</code> 标签的 <code>href</code> 属性、<code>div</code> 标签的 <code>class</code> 属性。</li>
<li>【文本节点】是指 HTML 标签的文字内容，如 <code>title</code> 标签中的文字。</li>
<li>【根节点】特指 <code>html</code> 标签。</li>
<li>其它…</li>
</ol>
<h2 id="document"><a href="#document" class="headerlink" title="document"></a>document</h2><p><code>document</code> 是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，<code>document</code> 是学习 DOM 的核心。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// document 是内置的对象</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// console.log(typeof document);</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 1. 通过 document 获取根节点</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">document</span>.<span class="property">documentElement</span>); <span class="comment">// 对应 html 标签</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 2. 通过 document 节取 body 节点</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">document</span>.<span class="property">body</span>); <span class="comment">// 对应 body 标签</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 3. 通过 document.write 方法向网页输出内容</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&#x27;Hello World!&#x27;</span>); <span class="comment">// Hello World!</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>上述列举了 <code>document</code> 对象的部分属性和方法，我们先对 <code>document</code> 有一个整体的认识。</p>
<h2 id="DOM-的增查改删"><a href="#DOM-的增查改删" class="headerlink" title="DOM 的增查改删"></a>DOM 的增查改删</h2><h3 id="查询"><a href="#查询" class="headerlink" title="查询"></a>查询</h3><h4 id="获取元素节点"><a href="#获取元素节点" class="headerlink" title="获取元素节点"></a>获取元素节点</h4><ul>
<li><code>getElementById()</code>：通过 <strong>id</strong> 属性获取<strong>一个</strong>元素节点对象</li>
<li><code>getElementsByClassName()</code>：通过 <strong>class</strong> 属性获取<strong>一个</strong>元素节点对象</li>
<li><code>getElementsByTagName()</code>：通过<strong>标签名</strong>获取<strong>一组</strong>元素节点对象</li>
<li><code>getElementsByTagName(&quot;body&quot;)[0]</code>：获取 body 标签，等价于：document.body</li>
<li><code>getElementsByTagName(&quot;*&quot;)</code>：获取页面所有元素</li>
<li><code>querySelector()</code>：   满足条件的第一个元素</li>
<li><code>querySelectorAll()</code>：  满足条件的元素集合 返回伪数组</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h3</span>&gt;</span>查找元素类型节点<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>从整个 DOM 树中查找 DOM 节点是学习 DOM 的第一个步骤。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;b1&quot;</span>&gt;</span>元素1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;b2&quot;</span>&gt;</span>元素2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">&quot;a1&quot;</span>&gt;</span>元素3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">&quot;a2&quot;</span>&gt;</span>元素4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  	<span class="keyword">const</span> a1 = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;a1&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a1) <span class="comment">// 里面放了a1节点的很多属性，如下左图所示，后面则不再写打印语句，直接看结果</span></span></span><br><span class="line"><span class="language-javascript">     </span></span><br><span class="line"><span class="language-javascript">  	<span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&#x27;b1&#x27;</span>)  <span class="comment">// HTMLCollection [li.b1]</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&#x27;li&#x27;</span>)  <span class="comment">// 如下右图所示</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&#x27;body&#x27;</span>)[<span class="number">0</span>]  <span class="comment">// 获取 body 标签</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;*&quot;</span>) <span class="comment">// HTMLCollection(13) [html, head, meta, title, body, h3, p, ul#AA, li.b1, li.b2, li#a1, li#a2, script, AA: ul#AA, a1: li#a1, a2: li#a2]</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;#a1&#x27;</span>)  <span class="comment">// &lt;li id=&quot;a1&quot;&gt;元素3&lt;/li&gt;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;li&#x27;</span>)  <span class="comment">// li.b1(里面包含了跟下图一样很多属性)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;li&#x27;</span>)<span class="comment">// NodeList(4) [li.b1, li.b2, li#a1, li#a2]</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src="/coderwjh.gitee.io/coderwjh.gitee.io/categories/image-20230713095511050.png"><img src="/coderwjh.gitee.io/coderwjh.gitee.io/categories/image-20230713095408117.png" alt="image-20230713095408117"></p>
<h4 id="操作元素内容"><a href="#操作元素内容" class="headerlink" title="操作元素内容"></a>操作元素内容</h4><p>通过修改 DOM 的文本内容，动态改变网页的内容。</p>
<ul>
<li><code>innerText</code>： 将文本内容添加/更新到任意标签位置，<strong>文本中包含的标签不会被解析。</strong></li>
<li><code>innerHTML</code>：将文本内容添加/更新到任意标签位置，<strong>文本中包含的标签会被解析。</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;b1&quot;</span>&gt;</span>AAA<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;b2&quot;</span>&gt;</span>元素2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">&quot;a1&quot;</span>&gt;</span>元素3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">&quot;a2&quot;</span>&gt;</span>元素4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> ul = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;ul&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(ul.<span class="property">innerText</span>); <span class="comment">// 如下图所示（上）</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(ul.<span class="property">innerHTML</span>); <span class="comment">// 如下图所示（下）</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<p>总结：如果文本内容中包含 <code>html</code> 标签时推荐使用 <code>innerHTML</code>，否则建议使用 <code>innerText</code> 属性。</p>
<h4 id="获取元素子节点"><a href="#获取元素子节点" class="headerlink" title="获取元素子节点"></a>获取元素子节点</h4><ul>
<li><code>getElementsByTagName()</code>：返回当前节点的指定标签名后代节点</li>
<li><code>childNodes</code>：表示当前节点的<strong>所有子节点</strong>，如果子节点的话可以用：当前节点.children</li>
<li><code>firstChild</code>：表示当前节点的<strong>第一个</strong>子节点</li>
<li><code>lastChild</code>：表示当前节点的<strong>最后一个</strong>子节点</li>
<li><code>nextElementSibling</code>：表示当前节点的<strong>下一个</strong>兄弟节点</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;AA&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;b1&quot;</span>&gt;</span>元素1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;b2&quot;</span>&gt;</span>元素2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">&quot;a1&quot;</span>&gt;</span>元素3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">&quot;a2&quot;</span>&gt;</span>元素4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> b = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;AA&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> c = b.<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;li&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(c) <span class="comment">// HTMLCollection(4)[li.b1, li.b2, li#a1, li#a2, a1: li#a1, a2: li#a2]</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> a = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;ul&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="property">children</span>) <span class="comment">// HTMLCollection(4)[li.b1, li.b2, li#a1, li#a2, a1: li#a1, a2: li#a2]</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="property">children</span>.<span class="property">length</span>) <span class="comment">// 4</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="property">childNodes</span>) <span class="comment">// NodeList(9)[text, li.b1, text, li.b2, text, li#a1, text, li#a2, text]</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="property">childNodes</span>[<span class="number">3</span>]) <span class="comment">// &lt;li class=&quot;b2&quot;&gt;元素2&lt;/li&gt;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="property">firstChild</span>) <span class="comment">// #text</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="property">lastChild</span>) <span class="comment">// #text</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="property">lastChild</span>.<span class="property">previousSibling</span>.<span class="property">innerText</span>) <span class="comment">// 元素4</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> a1 = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;#a1&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a1.<span class="property">nextElementSibling</span>.<span class="property">innerText</span>) <span class="comment">// 元素4</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="增加"><a href="#增加" class="headerlink" title="增加"></a>增加</h3><ol>
<li><code>createElement</code>：创建<strong>元素节点</strong>对象</li>
<li><code>createTextnode</code>：创建<strong>文本节点</strong>对象</li>
<li><code>appendChild</code>：把新的子节点<strong>添加</strong>到指定节点</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;AA&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;b1&quot;</span>&gt;</span>元素1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;b2&quot;</span>&gt;</span>元素2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">&quot;a1&quot;</span>&gt;</span>元素3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">&quot;a2&quot;</span>&gt;</span>元素4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> li = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;li&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> gz = <span class="variable language_">document</span>.<span class="title function_">createTextNode</span>(<span class="string">&quot;广州&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    li.<span class="title function_">appendChild</span>(gz) <span class="comment">// 先创建新节点“广州”</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> <span class="variable constant_">AA</span> = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;AA&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable constant_">AA</span>.<span class="title function_">appendChild</span>(li) <span class="comment">// 效果如下</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> <span class="variable constant_">AA</span> = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;AA&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> li = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;li&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    li.<span class="property">innerHTML</span> = <span class="string">&quot;广州&quot;</span> <span class="comment">// 效果同上一致，但前面的方法只会局部修改，innerHTML会修改整体</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable constant_">AA</span>.<span class="title function_">appendChild</span>(li)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<ul>
<li><code>父.insertBefore(新，旧)</code>：把新的节点<strong>插入</strong>到指定节点</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;AA&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;b1&quot;</span>&gt;</span>元素1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;b2&quot;</span>&gt;</span>元素2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">&quot;a1&quot;</span>&gt;</span>元素3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">&quot;a2&quot;</span>&gt;</span>元素4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">let</span> li = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;li&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> gz = <span class="variable language_">document</span>.<span class="title function_">createTextNode</span>(<span class="string">&quot;广州&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    li.<span class="title function_">appendChild</span>(gz)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> a1 = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;a1&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> <span class="variable constant_">AA</span> = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;AA&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 将 “广州” 插到 “a1” 前面</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable constant_">AA</span>.<span class="title function_">insertBefore</span>(li,a1) <span class="comment">// 效果如下，注意这里的a1参数如果用的getElementsByClassName则获取不到</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<ul>
<li>cloneNode(true)：复制，参数为true时表示深克隆，false时表示浅克隆</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;AA&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;b1&quot;</span>&gt;</span>元素1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;b2&quot;</span>&gt;</span>元素2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">&quot;a1&quot;</span>&gt;</span>元素3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">&quot;a2&quot;</span>&gt;</span>元素4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> ul = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;#AA&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> copy = ul.<span class="property">children</span>[<span class="number">3</span>].<span class="title function_">cloneNode</span>(<span class="literal">true</span>)</span></span><br><span class="line"><span class="language-javascript">  ul.<span class="title function_">appendChild</span>(copy)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h3 id="修改"><a href="#修改" class="headerlink" title="修改"></a>修改</h3><ul>
<li><code>父.replaceChild(新，旧)</code>：将旧节点<strong>替换</strong>为新节点</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;AA&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;b1&quot;</span>&gt;</span>元素1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;b2&quot;</span>&gt;</span>元素2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">&quot;a1&quot;</span>&gt;</span>元素3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">&quot;a2&quot;</span>&gt;</span>元素4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">let</span> li = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;li&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> ss = <span class="variable language_">document</span>.<span class="title function_">createTextNode</span>(<span class="string">&quot;深圳&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    li.<span class="title function_">appendChild</span>(ss)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> <span class="variable constant_">AA</span> = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;AA&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> a1 = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;a1&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable constant_">AA</span>.<span class="title function_">replaceChild</span>(li,a1) <span class="comment">// 如下图所示</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h3 id="删除"><a href="#删除" class="headerlink" title="删除"></a>删除</h3><p><code>父.removeChild(子)</code>：删除子节点，但这种得找父节点，不方便，下面这种比较常用</p>
<p><strong><code>子.parentNode.removeChild(子)</code></strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul id=&quot;AA&quot;&gt;</span><br><span class="line">  &lt;li class=&quot;b1&quot;&gt;元素1&lt;/li&gt;</span><br><span class="line">  &lt;li class=&quot;b2&quot;&gt;元素2&lt;/li&gt;</span><br><span class="line">  &lt;li id=&quot;a1&quot;&gt;元素3&lt;/li&gt;</span><br><span class="line">  &lt;li id=&quot;a2&quot;&gt;元素4&lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    let a1 = document.getElementById(&quot;a1&quot;)</span><br><span class="line">    a1.parentNode.removeChild(a1)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>



<h2 id="三种动态创建元素的区别"><a href="#三种动态创建元素的区别" class="headerlink" title="三种动态创建元素的区别"></a>三种动态创建元素的区别</h2><p>document.write 是直接将内容写入页面的内容流，但是<strong>文档流执行完毕，则它会导致页面全部重绘</strong></p>
<p>innerHTML </p>
<p>​        是将内容写入某个 DOM 节点，不会导致页面全部重绘</p>
<p>​        创建多个元素效率更高(不要拼按字符串，采取数组形式拼接)结构稍微复杂</p>
<p>createElement()创建多个元素效率稍低一点点，但是结构更清晰</p>
<h2 id="DOM-对-CSS-的增删改查"><a href="#DOM-对-CSS-的增删改查" class="headerlink" title="DOM 对 CSS 的增删改查"></a>DOM 对 CSS 的增删改查</h2><ul>
<li><code>元素.属性 = 新值</code>：直接能过属性名修改，最简洁的语法</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 1. 获取 img 对应的 DOM 元素</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> pic = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.pic&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">	<span class="comment">// 2. 修改属性</span></span></span><br><span class="line"><span class="language-javascript">  pic.<span class="property">src</span> = <span class="string">&#x27;./images/lion.webp&#x27;</span></span></span><br><span class="line"><span class="language-javascript">  pic.<span class="property">width</span> = <span class="number">400</span>;</span></span><br><span class="line"><span class="language-javascript">  pic.<span class="property">alt</span> = <span class="string">&#x27;图片不见了...&#x27;</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="查询-1"><a href="#查询-1" class="headerlink" title="查询"></a>查询</h3><ul>
<li>方式一：**<code>元素.style.样式名</code>**</li>
<li>方式二：**<code>getComputedStyle(元素).样式名</code>**（该方法不支持IE8以下浏览器）</li>
<li>方法三：<code>元素.currentStyle.样式名</code>（仅支持IE8浏览器）</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 内联样式 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span> <span class="attr">style</span>=<span class="string">&quot;color: red;&quot;</span>&gt;</span>随便添加一些文字<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;box&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/*通过 style 属性设置和读取都是内联样式，但无法读取内部样式、外部样式*/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(box.<span class="property">style</span>.<span class="property">color</span>); <span class="comment">// red</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">getComputedStyle</span>(box).<span class="property">color</span>) <span class="comment">// red rgb(255,165,0)</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(box.<span class="property">currentStyle</span>.<span class="property">color</span>) <span class="comment">// 报错，仅IE8支持</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-id">#box</span> &#123;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">color</span>: green; // 内部样式</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="增加-修改"><a href="#增加-修改" class="headerlink" title="增加/修改"></a>增加/修改</h3><ul>
<li>**<code>元素.style.样式名 = 新样式值</code>**：增加/修改元素样式。</li>
</ul>
<p>通过元素节点获得的 <code>style</code> 属性本身的数据类型也是对象，如 <code>box.style.color</code>、<code>box.style.width</code> 分别用来获取元素节点 CSS 样式的 <code>color</code> 和 <code>width</code> 的值。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  &lt;! --这里的内联样式有没有都不影响，只是为了方便理解 --&gt;</span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span> <span class="attr">style</span>=<span class="string">&quot;color: red;width: 150px;&quot;</span>&gt;</span>随便一些文本内容<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 获取 DOM 节点</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.intro&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    box.<span class="property">style</span>.<span class="property">border</span> = <span class="string">&#x27;1px solid #000&#x27;</span>	<span class="comment">// 增加样式</span></span></span><br><span class="line"><span class="language-javascript">    box.<span class="property">style</span>.<span class="property">color</span> = <span class="string">&#x27;orange&#x27;</span>			<span class="comment">// 修改样式</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// css 属性的 - 连接符与 JavaScript 的 减运算符冲突，所以要改成驼峰命名法</span></span></span><br><span class="line"><span class="language-javascript">    box.<span class="property">style</span>.<span class="property">backgroundColor</span> = <span class="string">&#x27;yellow&#x27;</span>	<span class="comment">// 效果如下</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src="/coderwjh.gitee.io/coderwjh.gitee.io/categories/image-20230715145246712.png" alt="image-20230715145246712"><img src="/coderwjh.gitee.io/coderwjh.gitee.io/categories/image-20230715145311145.png" alt="image-20230715145311145"></p>
<h2 id="DOM-对-类-的增删改查"><a href="#DOM-对-类-的增删改查" class="headerlink" title="DOM 对 类 的增删改查"></a>DOM 对 类 的增删改查</h2><ul>
<li>增加：<code>元素.className += &quot;类名&quot;</code></li>
<li>覆盖：<code>元素.className = &quot;类名&quot;</code></li>
<li>删除：元素.className.replace(“类名”，“”)</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;xx&quot;</span>&gt;</span>xxxxxxxxx<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> box = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    box.<span class="property">className</span> += <span class="string">&quot;one&quot;</span> <span class="comment">// 增加</span></span></span><br><span class="line"><span class="language-javascript">    box.<span class="property">className</span> = <span class="string">&quot;two&quot;</span>  <span class="comment">// 覆盖</span></span></span><br><span class="line"><span class="language-javascript">    box.<span class="property">className</span>.<span class="title function_">replace</span>(one, <span class="string">&quot;&quot;</span>) <span class="comment">// 删除</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-id">#xx</span> &#123;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">background-color</span>: pink;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.one</span> &#123;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">color</span>: yellow;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.two</span> &#123;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">color</span>: green;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>为了解决className 容易覆盖以前的类名，也可以通过classList方式追加和删除类名</p>
<ul>
<li><code>元素.classList.add</code>： 添加类</li>
<li><code>元素.classList.remove</code>：删除类</li>
<li>元素.classList.toggle：替换类</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">        <span class="selector-tag">div</span> &#123;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">background-color</span>: pink;</span></span><br><span class="line"><span class="language-css">        &#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">        <span class="selector-class">.one</span> &#123;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">background-color</span>: hotpink;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">margin-left</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css">        &#125;</span></span><br><span class="line"><span class="language-css">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;one&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 1.获取元素</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// let box = document.querySelector(&#x27;css选择器&#x27;)</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">let</span> box = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// add是个方法 添加  追加</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// box.classList.add(&#x27;one&#x27;)</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// remove() 移除 类</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// box.classList.remove(&#x27;one&#x27;)</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 切换类</span></span></span><br><span class="line"><span class="language-javascript">        box.<span class="property">classList</span>.<span class="title function_">toggle</span>(<span class="string">&#x27;one&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="自定义属性"><a href="#自定义属性" class="headerlink" title="自定义属性"></a>自定义属性</h2><p>标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected</p>
<p>自定义属性：</p>
<p>在html5中推出来了专门的data-自定义属性  </p>
<p>在标签上一律以data-开头</p>
<p>在DOM对象上一律以dataset对象方式获取</p>
<p>容易区分出哪个是自定义属性，但兼容性较差，仅支持ie11以上的浏览器</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">div</span> <span class="attr">data-id</span>=<span class="string">&quot;1&quot;</span>&gt;</span> 自定义属性 <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 1. 获取元素</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">let</span> div = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 2. 获取自定义属性值</span></span></span><br><span class="line"><span class="language-javascript">         <span class="variable language_">console</span>.<span class="title function_">log</span>(div.<span class="property">dataset</span>.<span class="property">id</span>)</span></span><br><span class="line"><span class="language-javascript">      </span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>操作自定义属性：getAttribute()、setAttribute()</p>
<p>注意：这种方式不容易区别操作的属性是否为自定义属性，但兼容性较好</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;demo&quot;</span> <span class="attr">data-index</span>=<span class="string">&quot;1&quot;</span> <span class="attr">class</span>=<span class="string">&quot;nav&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> div = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1.获取元素的属性值</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// (1) element.属性</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(div.<span class="property">id</span>) <span class="comment">// demo</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// (2) element.getAttribute(属性&#x27;) get得到获取 attribute 属性的意思 我们程序员自己添加的属性,我们称为自定义属性 index</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(div.<span class="title function_">getAttribute</span>(<span class="string">&#x27;id&#x27;</span>)) <span class="comment">// demo</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(div.<span class="title function_">getAttribute</span>(<span class="string">&#x27;index&#x27;</span>)) <span class="comment">// 1</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 修改元素属性值</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// (1) element.属性= &#x27;值&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    div.<span class="property">id</span> = <span class="string">&#x27;test&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    div.<span class="property">className</span> = <span class="string">&#x27;navs&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// (2) element.setAttribute(&#x27;属性’，这值&#x27;); 主要针对于自定义属性</span></span></span><br><span class="line"><span class="language-javascript">    div.<span class="title function_">setAttribute</span>(<span class="string">&#x27;data-index&#x27;</span>, <span class="number">2</span>)</span></span><br><span class="line"><span class="language-javascript">    div.<span class="title function_">setAttribute</span>(<span class="string">&#x27;class&#x27;</span>, <span class="string">&#x27;footer&#x27;</span>) <span class="comment">// class 特殊 这里面写的就是class 不是 cllassName</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 3 移除属性 removeAttribute(属性)</span></span></span><br><span class="line"><span class="language-javascript">    div.<span class="title function_">removeAttribute</span>(<span class="string">&#x27;data-index&#x27;</span>) <span class="comment">// &lt;div id=&quot;test&quot; class=&quot;footer&quot;&gt;</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="间歇函数"><a href="#间歇函数" class="headerlink" title="间歇函数"></a>间歇函数</h2><p><code>setInterval</code> 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 1. 定义一个普通函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">repeat</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;不知疲倦的执行下去....&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 2. 使用 setInterval 调用 repeat 函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 间隔 1000 毫秒，重复调用 repeat</span></span></span><br><span class="line"><span class="language-javascript">  <span class="built_in">setInterval</span>(repeat, <span class="number">1000</span>)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="七、事件"><a href="#七、事件" class="headerlink" title="七、事件"></a>七、事件</h1><blockquote>
<p>学习会为 DOM 注册事件，实现简单可交互的网页特交</p>
</blockquote>
<p>事件是编程语言中的术语，它是用来描述程序的行为或状态的，<strong>一旦行为或状态发生改变，便立即调用一个函数。</strong></p>
<p>例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片</p>
<h2 id="事件监听"><a href="#事件监听" class="headerlink" title="事件监听"></a>事件监听</h2><p>结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。</p>
<p><code>addEventListener</code> 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>事件监听<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h3</span>&gt;</span>事件监听<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;text&quot;</span>&gt;</span>为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;btn&quot;</span>&gt;</span>点击改变文字颜色<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 获取 button 对应的 DOM 对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> btn = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;#btn&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 添加事件监听</span></span></span><br><span class="line"><span class="language-javascript">    btn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;等待事件被触发...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 改变 p 标签的文字颜色</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">let</span> text = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;text&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">      text.<span class="property">style</span>.<span class="property">color</span> = <span class="string">&#x27;red&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 3. 只要用户点击了按钮，事件便触发了！！！</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>完成事件监听分成3个步骤：</p>
<ol>
<li>获取 DOM 元素</li>
<li>通过 <code>addEventListener</code> 方法为 DOM 节点添加事件监听</li>
<li>等待事件触发，如用户点击了某个按钮时便会触发 <code>click</code> 事件类型</li>
<li>事件触发后，相对应的回调函数会被执行</li>
</ol>
<p>大白话描述：所谓的事件无非就是找个机会（事件触发）调用一个函数（回调函数）。</p>
<h2 id="事件类型"><a href="#事件类型" class="headerlink" title="事件类型"></a>事件类型</h2><p><code>click</code> 译成中文是【点击】的意思，它的含义是监听（等着）用户鼠标的单击操作，除了【单击】还有【双击】<code>dblclick</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 双击事件类型</span></span></span><br><span class="line"><span class="language-javascript">  btn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;dblclick&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;等待事件被触发...&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 改变 p 标签的文字颜色</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> text = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.text&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    text.<span class="property">style</span>.<span class="property">color</span> = <span class="string">&#x27;red&#x27;</span></span></span><br><span class="line"><span class="language-javascript">  &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 只要用户双击击了按钮，事件便触发了！！！</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>结论：【事件类型】决定了事件被触发的方式，如 <code>click</code> 代表鼠标单击，<code>dblclick</code> 代表鼠标双击。</p>
<p>将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等，我们逐一展开学习。</p>
<h3 id="鼠标事件"><a href="#鼠标事件" class="headerlink" title="鼠标事件"></a>鼠标事件</h3><p>鼠标事件是指跟鼠标操作相关的事件，如单击、双击、移动等。</p>
<p><code>mouseenter</code> 监听鼠标是否移入 DOM 元素</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h3</span>&gt;</span>鼠标事件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>监听与鼠标相关的操作<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">hr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 需要事件监听的 DOM 元素</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.box&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 监听鼠标是移入当前 DOM 元素</span></span></span><br><span class="line"><span class="language-javascript">    box.<span class="title function_">addEventListener</span>(<span class="string">&#x27;mouseenter&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 修改文本内容</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">this</span>.<span class="property">innerText</span> = <span class="string">&#x27;鼠标移入了...&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 修改光标的风格</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">this</span>.<span class="property">style</span>.<span class="property">cursor</span> = <span class="string">&#x27;move&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">      </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 禁用鼠标右键菜单</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;contextmenu&#x27;</span>, <span class="keyword">function</span>(<span class="params">e</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">        e.<span class="title function_">preventDefault</span>()</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">      </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 禁用选中文字</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;selectstart&#x27;</span>, <span class="keyword">function</span>(<span class="params">e</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">        e.<span class="title function_">preventDefault</span>()</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>mouseleave</code> 监听鼠标是否移出 DOM 元素</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h3</span>&gt;</span>鼠标事件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>监听与鼠标相关的操作<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">hr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 需要事件监听的 DOM 元素</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.box&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 监听鼠标是移出当前 DOM 元素</span></span></span><br><span class="line"><span class="language-javascript">    box.<span class="title function_">addEventListener</span>(<span class="string">&#x27;mouseleave&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 修改文本内容</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">this</span>.<span class="property">innerText</span> = <span class="string">&#x27;鼠标移出了...&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h3 id="键盘事件"><a href="#键盘事件" class="headerlink" title="键盘事件"></a>键盘事件</h3><p>keydown   键盘按下触发<br>keyup   键盘抬起触发</p>
<h3 id="焦点事件"><a href="#焦点事件" class="headerlink" title="焦点事件"></a>焦点事件</h3><p>focus  获得焦点</p>
<p>blur 失去焦点</p>
<h3 id="文本框输入事件"><a href="#文本框输入事件" class="headerlink" title="文本框输入事件"></a>文本框输入事件</h3><p>input  </p>
<h2 id="事件处理程序"><a href="#事件处理程序" class="headerlink" title="事件处理程序"></a>事件处理程序</h2><p><code>addEventListener</code> 的第2个参数是函数，这个函数会在事件被触发时立即被调用，在这个函数中可以编写任意逻辑的代码，如改变 DOM 文本颜色、文本内容等。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 双击事件类型</span></span></span><br><span class="line"><span class="language-javascript">  btn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;dblclick&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;等待事件被触发...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> text = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.text&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 改变 p 标签的文字颜色</span></span></span><br><span class="line"><span class="language-javascript">    text.<span class="property">style</span>.<span class="property">color</span> = <span class="string">&#x27;red&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 改变 p 标签的文本内容</span></span></span><br><span class="line"><span class="language-javascript">    text.<span class="property">style</span>.<span class="property">fontSize</span> = <span class="string">&#x27;20px&#x27;</span></span></span><br><span class="line"><span class="language-javascript">  &#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>结论：【事件处理程序】决定了事件触发后应该执行的逻辑。</p>
<h2 id="事件对象"><a href="#事件对象" class="headerlink" title="事件对象"></a>事件对象</h2><p>任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h3</span>&gt;</span>事件对象<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">hr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 获取 .box 元素</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.box&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 添加事件监听</span></span></span><br><span class="line"><span class="language-javascript">    box.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params">e</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;任意事件类型被触发后，相关信息会以对象形式被记录下来...&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 事件回调函数的第1个参数即所谓的事件对象</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(e)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 <code>event</code>、<code>ev</code> 、<code>ev</code> 。</p>
<p>接下来简单看一下事件对象中包含了哪些有用的信息：</p>
<ol>
<li><code>ev.type</code> 当前事件的类型</li>
<li><code>ev.clientX/Y</code> 光标相对浏览器窗口的位置</li>
<li><code>ev.offsetX/Y</code> 光标相于当前 DOM 元素的位置</li>
</ol>
<p>注：在事件回调函数内部通过 window.event 同样可以获取事件对象。</p>
<h2 id="环境对象"><a href="#环境对象" class="headerlink" title="环境对象"></a>环境对象</h2><blockquote>
<p>能够分析判断函数运行在不同环境中 this 所指代的对象。</p>
</blockquote>
<p>环境对象指的是函数内部特殊的变量 <code>this</code> ，它代表着当前函数运行时所处的环境。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 声明函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">sayHi</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// this 是一个变量</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 声明一个对象</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> user = &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">name</span>: <span class="string">&#x27;张三&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">sayHi</span>: sayHi <span class="comment">// 此处把 sayHi 函数，赋值给 sayHi 属性</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> person = &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">name</span>: <span class="string">&#x27;李四&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">sayHi</span>: sayHi</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 直接调用</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">sayHi</span>() <span class="comment">// window</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">window</span>.<span class="title function_">sayHi</span>() <span class="comment">// window</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 做为对象方法调用</span></span></span><br><span class="line"><span class="language-javascript">  user.<span class="title function_">sayHi</span>()<span class="comment">// user</span></span></span><br><span class="line"><span class="language-javascript">	person.<span class="title function_">sayHi</span>()<span class="comment">// person</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>结论：</p>
<ol>
<li><code>this</code> 本质上是一个变量，数据类型为对象</li>
<li>函数的调用方式不同 <code>this</code> 变量的值也不同</li>
<li>【谁调用 <code>this</code> 就是谁】是判断 <code>this</code> 值的粗略规则</li>
<li>函数直接调用时实际上 <code>window.sayHi()</code> 所以 <code>this</code> 的值为 <code>window</code></li>
</ol>
<h2 id="回调函数"><a href="#回调函数" class="headerlink" title="回调函数"></a>回调函数</h2><p>如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 声明 foo 函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">arg</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(arg);</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 普通的值做为参数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">foo</span>(<span class="number">10</span>);</span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">foo</span>(<span class="string">&#x27;hello world!&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">foo</span>([<span class="string">&#x27;html&#x27;</span>, <span class="string">&#x27;css&#x27;</span>, <span class="string">&#x27;javascript&#x27;</span>]);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">bar</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;函数也能当参数...&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 函数也可以做为参数！！！！</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">foo</span>(bar);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>函数 <code>bar</code> 做参数传给了 <code>foo</code> 函数，<code>bar</code> 就是所谓的回调函数了！！！</p>
<p>我们回顾一下间歇函数 <code>setInterval</code> </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我是回调函数...&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 调用定时器</span></span></span><br><span class="line"><span class="language-javascript">  <span class="built_in">setInterval</span>(fn, <span class="number">1000</span>);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>fn</code> 函数做为参数传给了 <code>setInterval</code> ，这便是回调函数的实际应用了，结合刚刚学习的函数表达式上述代码还有另一种更常见写法。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 调用定时器，匿名函数做为参数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="built_in">setInterval</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我是回调函数...&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  &#125;, <span class="number">1000</span>);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>结论：</p>
<ol>
<li>回调函数本质还是函数，只不过把它当成参数使用</li>
<li>使用匿名函数做为回调函数比较常见</li>
</ol>
<h2 id="事件流"><a href="#事件流" class="headerlink" title="事件流"></a>事件流</h2><p>事件流是对事件执行过程的描述，了解事件的执行过程有助于加深对事件的理解，提升开发实践中对事件运用的灵活度。</p>


<p>如上图所示，任意事件被触发时总会经历两个阶段：【捕获阶段】和【冒泡阶段】。</p>
<p>简言之，捕获阶段是【从父到子】的传导过程，冒泡阶段是【从子向父】的传导过程。</p>
<h3 id="捕获和冒泡"><a href="#捕获和冒泡" class="headerlink" title="捕获和冒泡"></a>捕获和冒泡</h3><p>了解了什么是事件流之后，我们来看事件流是如何影响事件执行的：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h3</span>&gt;</span>事件流<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;outer&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;inner&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;child&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 获取嵌套的3个节点</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> outer = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.outer&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> inner = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.inner&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> child = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.child&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">		</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// html 元素添加事件</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;html...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">		</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// body 元素添加事件</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;body...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 外层的盒子添加事件</span></span></span><br><span class="line"><span class="language-javascript">    outer.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;outer...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 中间的盒子添加事件</span></span></span><br><span class="line"><span class="language-javascript">    outer.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;inner...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 内层的盒子添加事件</span></span></span><br><span class="line"><span class="language-javascript">    outer.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;child...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>执行上述代码后发现，当单击事件触发时，其祖先元素的单击事件也【相继触发】，这是为什么呢？</p>
<p>结合事件流的特征，我们知道当某个元素的事件被触发时，事件总是会先经过其祖先才能到达当前元素，然后再由当前元素向祖先传递，事件在流动的过程中遇到相同的事件便会被触发。</p>
<p>再来关注一个细节就是事件相继触发的【执行顺序】，事件的执行顺序是可控制的，即可以在捕获阶段被执行，也可以在冒泡阶段被执行。</p>
<p>如果事件是在冒泡阶段执行的，我们称为冒泡模式，它会先执行子盒子事件再去执行父盒子事件，默认是冒泡模式。</p>
<p>如果事件是在捕获阶段执行的，我们称为捕获模式，它会先执行父盒子事件再去执行子盒子事件。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h3</span>&gt;</span>事件流<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;outer&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;inner&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 获取嵌套的3个节点</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> outer = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.outer&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> inner = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.inner&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 外层的盒子</span></span></span><br><span class="line"><span class="language-javascript">    outer.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;outer...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;, <span class="literal">true</span>) <span class="comment">// true 表示在捕获阶段执行事件</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 中间的盒子</span></span></span><br><span class="line"><span class="language-javascript">    outer.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;inner...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;, <span class="literal">true</span>)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>结论：</p>
<ol>
<li><code>addEventListener</code> 第3个参数决定了事件是在捕获阶段触发还是在冒泡阶段触发</li>
<li><code>addEventListener</code> 第3个参数为  <code>true</code> 表示捕获阶段触发，<code>false</code> 表示冒泡阶段触发，默认值为 <code>false</code></li>
<li>事件流只会在父子元素具有相同事件类型时才会产生影响</li>
<li>绝大部分场景都采用默认的冒泡模式（其中一个原因是早期 IE 不支持捕获）</li>
</ol>


<h3 id="阻止冒泡"><a href="#阻止冒泡" class="headerlink" title="阻止冒泡"></a>阻止冒泡</h3><ul>
<li><strong><code>ev.stopPropagation()</code></strong></li>
</ul>
<p>阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h3</span>&gt;</span>阻止冒泡<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;outer&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;inner&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;child&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 获取嵌套的3个节点</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> outer = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.outer&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> inner = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.inner&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> child = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.child&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 外层的盒子</span></span></span><br><span class="line"><span class="language-javascript">    outer.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;outer...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 中间的盒子</span></span></span><br><span class="line"><span class="language-javascript">    inner.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;inner...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 阻止事件冒泡</span></span></span><br><span class="line"><span class="language-javascript">      ev.<span class="title function_">stopPropagation</span>()</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 内层的盒子</span></span></span><br><span class="line"><span class="language-javascript">    child.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;child...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 借助事件对象，阻止事件向上冒泡</span></span></span><br><span class="line"><span class="language-javascript">      ev.<span class="title function_">stopPropagation</span>()</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>结论：事件对象中的 <code>ev.stopPropagation</code> 方法，专门用来阻止事件冒泡。</p>
<blockquote>
<p>鼠标经过事件：</p>
<p>mouseover 和 mouseout 会有冒泡效果</p>
<p>mouseenter  和 mouseleave   没有冒泡效果 (推荐)</p>
</blockquote>
<h3 id="阻止默认行为"><a href="#阻止默认行为" class="headerlink" title="阻止默认行为"></a>阻止默认行为</h3><p>我们某些情况下需要阻止默认行为的发生，比如阻止链接的跳转，表单域的跳转等</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;http://www.baidu.com&gt;</span></span></span><br><span class="line"><span class="string"><span class="tag">	&lt;input type=&quot;</span><span class="attr">submit</span>” <span class="attr">value</span>=<span class="string">&quot;提交&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line">	const form = document .querySelector( form&#x27;)</span><br><span class="line">   	form.addEventListener(&#x27;click&#x27;，function (e) &#123;</span><br><span class="line">    	// 阻止表单默认提交行为</span><br><span class="line">		e.preventDefault()</span><br><span class="line">    &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="事件委托"><a href="#事件委托" class="headerlink" title="事件委托"></a>事件委托</h2><p>事件委托是利用事件流的特征解决一些现实开发需求的知识技巧，主要的作用是提升程序效率。</p>
<p>大量的事件监听是比较耗费性能的，如下代码所示</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 假设页面中有 10000 个 button 元素</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> buttons = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;table button&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt;= buttons.<span class="property">length</span>; i++) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 为 10000 个 button 元素添加了事件</span></span></span><br><span class="line"><span class="language-javascript">    buttons.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 省略具体执行逻辑...</span></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>利用事件流的特征，可以对上述的代码进行优化，事件的的冒泡模式总是会将事件流向其父元素的，如果父元素监听了相同的事件类型，那么父元素的事件就会被触发并执行，正是利用这一特征对上述代码进行优化，如下代码所示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 假设页面中有 10000 个 button 元素</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> buttons = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;table button&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 假设上述的 10000 个 buttom 元素共同的祖先元素是 table</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> parents = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;table&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  parents.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;点击任意子元素都会触发事件...&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  &#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>我们的最终目的是保证只有点击 button 子元素才去执行事件的回调函数，如何判断用户点击是哪一个子元素呢？</p>


<p>事件对象中的属性 <code>target</code> 或 <code>srcElement</code>属性表示真正触发事件的元素，它是一个元素类型的节点。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 假设页面中有 10000 个 button 元素</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> buttons = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;table button&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 假设上述的 10000 个 buttom 元素共同的祖先元素是 table</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> parents = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;table&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">  parents.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(ev.target);</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 只有 button 元素才会真正去执行逻辑（注意这里判断的标签需要全大写）</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">if</span>(ev.<span class="property">target</span>.<span class="property">tagName</span> === <span class="string">&#x27;BUTTON&#x27;</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 执行的逻辑</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">  &#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>优化过的代码只对祖先元素添加事件监听，相比对 10000 个元素添加事件监听执行效率要高许多！！！</p>
<p>总结：</p>
<ul>
<li>优点：减少注册次数，可以提高程序性能</li>
<li>原理：事件委托其实是利用事件冒泡的特点<ul>
<li>给<strong>父元素注册事件</strong>，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件</li>
</ul>
</li>
<li>实现：事件对象.target.tagName 可以获得真正触发事件的元素</li>
</ul>
<p>例：</p>




<h2 id="其他事件"><a href="#其他事件" class="headerlink" title="其他事件"></a>其他事件</h2><h3 id="页面事件"><a href="#页面事件" class="headerlink" title="页面事件"></a>页面事件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 页面加载事件: load，监听页面所有资源加载完毕</span></span><br><span class="line"><span class="comment">// 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件, 有些时候需要等页面资源全部处理完了做一些事情</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;load&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// xxxxx</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 调整窗口大小事件: resize,常用于响应式页面布局</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;resize&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// xxxxx</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="元素滚动事件"><a href="#元素滚动事件" class="headerlink" title="元素滚动事件"></a>元素滚动事件</h3><p>滚动条在滚动的时候持续触发的事件：scroll</p>
<p>获取滚动的位置：</p>
<ul>
<li><code>scrollHeight</code>：获取元素整个滚动区的高度，当满足 scrollHeight - scrollTop == clientHeight 时，说明垂直滚动条滚动到底了</li>
<li><code>scrollWidth</code>：获取元素整个滚动区的宽度，当满足 scrollWidth - scrollLeft == clientWidth 时，说明水平滚动条滚动到底了</li>
<li>scrollTo（x，y）：把内容滚动到指定位置</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;scroll&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// 页面到底滚动了多少像素，被卷去了多少：scrollTop</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<p>例：</p>


<h3 id="页面尺寸事件"><a href="#页面尺寸事件" class="headerlink" title="页面尺寸事件"></a>页面尺寸事件</h3><p>会在窗口尺寸改变的时候触发事件：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;resize&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// xxxxx</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>获取元素尺寸位置：</p>
<ul>
<li>**<code>clientWidth</code>**：获取元素（内容+内边距）宽度，clientHeight 高度同理</li>
<li>**<code>offsetParent</code>**：获取当前元素的父元素</li>
<li><code>offsetWidth</code>：获取元素（内容+内边距+边框）宽度，clientHeight 高度同理</li>
<li>**<code>offsetLeft</code>**：当前元素相对于其定位父元素的水平偏移量，offsetTop：垂直偏移量</li>
</ul>


<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span> <span class="attr">style</span>=<span class="string">&quot;width: 150px;border: 1px solid #000;&quot;</span>&gt;</span>随便添加一些文字<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;box&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(box.<span class="property">clientWidth</span>)    <span class="comment">// 150</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(box.<span class="property">clientHeight</span>)   <span class="comment">// 21</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(box.<span class="property">offsetParent</span>)	<span class="comment">// body</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(box.<span class="property">offsetWidth</span>)    <span class="comment">// 152</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(box.<span class="property">offsetHeight</span>)   <span class="comment">// 23</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0</p>
<p>想获取页面滚动位置，可查看后面的元素滚动事件</p>
<p>例：以下例子可实现tab导航栏切换时实现下划线移动的效果</p>




<h4 id="offset与style的区别"><a href="#offset与style的区别" class="headerlink" title="offset与style的区别"></a>offset与style的区别</h4>

<h3 id="offset、client、scroll总结"><a href="#offset、client、scroll总结" class="headerlink" title="offset、client、scroll总结"></a>offset、client、scroll总结</h3>

<p>主要用法：</p>
<ol>
<li><strong>offset</strong> 系列经常用于获得<strong>元素位置</strong> offsetLeft offsetTop</li>
<li><strong>client</strong> 经常用于获取<strong>元素大小</strong> clientWidth clientHeight</li>
<li>scroll 经常用于获取滚动距离 scrollTop scrollLeft</li>
</ol>
<h3 id="页面触摸事件（M端事件）"><a href="#页面触摸事件（M端事件）" class="headerlink" title="页面触摸事件（M端事件）"></a>页面触摸事件（M端事件）</h3><p>会在触摸屏幕时触发事件</p>
<ul>
<li>touchstart：开始触摸时</li>
<li>touchend：结束触摸时</li>
<li>touchmove：一直摸时</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;touchstart&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// xxxxx</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="移动端click延迟解决方案"><a href="#移动端click延迟解决方案" class="headerlink" title="移动端click延迟解决方案"></a>移动端click延迟解决方案</h3><p>移动端click事件会有300ms的延时，原因是移动端屏幕<strong>双击会缩放</strong>(double tap to zoom)</p>
<p>页面解决方案:</p>
<p>方法一：禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;user-scalable=no&quot;</span></span></span><br></pre></td></tr></table></figure>

<p>方法二：利用touch事件自己封装这个事件解决300ms延迟</p>
<p>原理就是</p>
<ol>
<li>当我们手指触摸屏幕，记录当前触摸时间</li>
<li>当我们手指离开屏幕，用离开的时间减去触摸的时间</li>
<li>如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="comment">//封装tap，解决click 300ms 延时</span></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">function</span> <span class="title function_">tap</span> (obj, callback) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> isMove = <span class="literal">false</span>;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> startTime = <span class="number">0</span>;<span class="comment">// 记录触摸时候的时间变量</span></span></span><br><span class="line"><span class="language-javascript">	obj.<span class="title function_">addEventListener</span>(<span class="string">&#x27;touchstart&#x27;</span>,  <span class="keyword">function</span> (<span class="params">e</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    	startTime = <span class="title class_">Date</span>.<span class="title function_">now</span>(); <span class="comment">// 记录触摸时间</span></span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript">    obj.<span class="title function_">addEventListener</span>(<span class="string">&#x27;touchmove&#x27;</span>, <span class="keyword">function</span> (<span class="params">e</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">		isMove = <span class="literal">true</span>; <span class="comment">// 看看是否有滑动，有滑动算拖拽，不算点击</span></span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript">    obj.<span class="title function_">addEventListener</span>(<span class="string">&#x27;touchend&#x27;</span>, <span class="keyword">function</span> (<span class="params">e</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="keyword">if</span>(!isMove &amp;&amp; (<span class="title class_">Date</span>.<span class="title function_">now</span>() - startTime) &lt; <span class="number">150</span>) &#123; <span class="comment">// 如果手指摸和离开时间小于150ms 算点击</span></span></span><br><span class="line"><span class="language-javascript">               callback &amp;&amp; <span class="title function_">callback</span>(); <span class="comment">// 执行回调函数</span></span></span><br><span class="line"><span class="language-javascript">        &#125;                              </span></span><br><span class="line"><span class="language-javascript">    	isMove = <span class="literal">false</span>; <span class="comment">// 取反 重置</span></span></span><br><span class="line"><span class="language-javascript">        startTime = <span class="number">0</span>;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript">&#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//调用</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">tap</span>(div，<span class="keyword">function</span>(<span class="params"></span>)&#123; <span class="comment">// 执行代码 &#125;);</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>方法三：用第三方插件（<a target="_blank" rel="noopener" href="https://github.com/ftlabs/fastclick%EF%BC%89">https://github.com/ftlabs/fastclick）</a></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;fastclick.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">if</span> (<span class="string">&#x27;addEventListener&#x27;</span> <span class="keyword">in</span> <span class="variable language_">document</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>( <span class="string">&#x27;DOMContentLoaded&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                (<span class="title class_">FastClick</span>.<span class="title function_">attach</span>(<span class="variable language_">document</span>.<span class="property">body</span>);</span></span><br><span class="line"><span class="language-javascript">            &#125;,<span class="literal">false</span>);</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="JS插件"><a href="#JS插件" class="headerlink" title="JS插件"></a>JS插件</h2><h3 id="swiper"><a href="#swiper" class="headerlink" title="swiper"></a>swiper</h3><p>官网：<a target="_blank" rel="noopener" href="https://www.swiper.com.cn/">https://www.swiper.com.cn</a></p>
<p>演示：<a target="_blank" rel="noopener" href="https://www.swiper.com.cn/demo/index.html">https://www.swiper.com.cn/demo/index.html</a></p>
<p>教程：<a target="_blank" rel="noopener" href="https://www.swiper.com.cn/usage/index.html">https://www.swiper.com.cn/usage/index.html</a></p>
<p>API：<a target="_blank" rel="noopener" href="https://www.swiper.com.cn/api/index.html">https://www.swiper.com.cn/api/index.html</a></p>
<p>注意！使用多个swiper时，注意区分类名</p>
<h3 id="bootstrap"><a href="#bootstrap" class="headerlink" title="bootstrap"></a>bootstrap</h3><p>官网：<a target="_blank" rel="noopener" href="https://www.bootcss.com/">Bootstrap中文网 (bootcss.com)</a></p>
<p>使用步骤：</p>
<ol>
<li>上官网下载并引入相关的js文件</li>
<li>将需要的html、css、js复制并修改参数即可（swiper、bootstrap这俩插件都一样）</li>
</ol>
<h1 id="八、正则表达式"><a href="#八、正则表达式" class="headerlink" title="八、正则表达式"></a>八、正则表达式</h1><p><strong>正则表达式</strong>（Regular Expression）是一种字符串匹配的模式（规则）</p>
<p><strong>使用场景：</strong></p>
<ul>
<li>例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配)</li>
<li>过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 </li>
</ul>
 





<h2 id="正则基本使用"><a href="#正则基本使用" class="headerlink" title="正则基本使用"></a>正则基本使用</h2><ol>
<li><p>定义规则</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> reg =  <span class="regexp">/表达式/</span></span><br></pre></td></tr></table></figure>

<ul>
<li>其中<code>/   /</code>是正则表达式字面量</li>
<li>正则表达式也是<code>对象 </code></li>
</ul>
</li>
<li><p>作用</p>
<ul>
<li>表单验证（匹配）</li>
<li>过滤敏感词（替换）</li>
<li>字符串中提取我们想要的部分（提取）</li>
</ul>
</li>
<li><p>使用正则</p>
<ul>
<li><code>test()方法</code>   用来查看正则表达式与指定的字符串是否匹配</li>
<li>如果正则表达式与指定的字符串匹配 ，返回<code>true</code>，否则<code>false</code></li>
</ul>
</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 正则表达式的基本使用</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> str = <span class="string">&#x27;web前端开发&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 定义规则</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> reg = <span class="regexp">/web/</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 使用正则  test()</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg.<span class="title function_">test</span>(str))  <span class="comment">// true  如果符合规则匹配上则返回true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg.<span class="title function_">test</span>(<span class="string">&#x27;java开发&#x27;</span>))  <span class="comment">// false  如果不符合规则匹配上则返回 false</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="元字符"><a href="#元字符" class="headerlink" title="元字符"></a>元字符</h3><ol>
<li><strong>普通字符:</strong></li>
</ol>
<ul>
<li>大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。</li>
<li>普通字符只能够匹配字符串中与它们相同的字符。    </li>
<li>比如，规定用户只能输入英文26个英文字母，普通字符的话  /[abcdefghijklmnopqrstuvwxyz]/</li>
</ul>
<ol start="2">
<li><strong>元字符(特殊字符）</strong></li>
</ol>
<ul>
<li>是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。</li>
<li>比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/  </li>
</ul>
<h3 id="边界符"><a href="#边界符" class="headerlink" title="边界符"></a>边界符</h3><p>正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符</p>


<blockquote>
<p>如果 ^ 和 $ 在一起，表示必须是精确匹配</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 元字符之边界符</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 匹配开头的位置 ^</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> reg = <span class="regexp">/^web/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg.<span class="title function_">test</span>(<span class="string">&#x27;web前端&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg.<span class="title function_">test</span>(<span class="string">&#x27;前端web&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg.<span class="title function_">test</span>(<span class="string">&#x27;前端web学习&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg.<span class="title function_">test</span>(<span class="string">&#x27;we&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 匹配结束的位置 $</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> reg1 = <span class="regexp">/web$/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg1.<span class="title function_">test</span>(<span class="string">&#x27;web前端&#x27;</span>))  <span class="comment">//  false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg1.<span class="title function_">test</span>(<span class="string">&#x27;前端web&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg1.<span class="title function_">test</span>(<span class="string">&#x27;前端web学习&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg1.<span class="title function_">test</span>(<span class="string">&#x27;we&#x27;</span>))  <span class="comment">// false  </span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 3. 精确匹配 ^ $</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> reg2 = <span class="regexp">/^web$/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg2.<span class="title function_">test</span>(<span class="string">&#x27;web前端&#x27;</span>))  <span class="comment">//  false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg2.<span class="title function_">test</span>(<span class="string">&#x27;前端web&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg2.<span class="title function_">test</span>(<span class="string">&#x27;前端web学习&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg2.<span class="title function_">test</span>(<span class="string">&#x27;we&#x27;</span>))  <span class="comment">// false </span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg2.<span class="title function_">test</span>(<span class="string">&#x27;web&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg2.<span class="title function_">test</span>(<span class="string">&#x27;webweb&#x27;</span>))  <span class="comment">// flase </span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="量词"><a href="#量词" class="headerlink" title="量词"></a>量词</h3><p>量词用来设定某个模式重复次数</p>


<blockquote>
<p>注意： 逗号左右两侧千万不要出现空格</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 元字符之量词</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. * 重复次数 &gt;= 0 次</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> reg1 = <span class="regexp">/^w*$/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg1.<span class="title function_">test</span>(<span class="string">&#x27;&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg1.<span class="title function_">test</span>(<span class="string">&#x27;w&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg1.<span class="title function_">test</span>(<span class="string">&#x27;ww&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;-----------------------&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. + 重复次数 &gt;= 1 次</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> reg2 = <span class="regexp">/^w+$/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg2.<span class="title function_">test</span>(<span class="string">&#x27;&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg2.<span class="title function_">test</span>(<span class="string">&#x27;w&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg2.<span class="title function_">test</span>(<span class="string">&#x27;ww&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;-----------------------&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 3. ? 重复次数  0 || 1 </span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> reg3 = <span class="regexp">/^w?$/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg3.<span class="title function_">test</span>(<span class="string">&#x27;&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg3.<span class="title function_">test</span>(<span class="string">&#x27;w&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg3.<span class="title function_">test</span>(<span class="string">&#x27;ww&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;-----------------------&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 4. &#123;n&#125; 重复 n 次</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> reg4 = <span class="regexp">/^w&#123;3&#125;$/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg4.<span class="title function_">test</span>(<span class="string">&#x27;&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg4.<span class="title function_">test</span>(<span class="string">&#x27;w&#x27;</span>))  <span class="comment">// flase</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg4.<span class="title function_">test</span>(<span class="string">&#x27;ww&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg4.<span class="title function_">test</span>(<span class="string">&#x27;www&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg4.<span class="title function_">test</span>(<span class="string">&#x27;wwww&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;-----------------------&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 5. &#123;n,&#125; 重复次数 &gt;= n </span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> reg5 = <span class="regexp">/^w&#123;2,&#125;$/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg5.<span class="title function_">test</span>(<span class="string">&#x27;&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg5.<span class="title function_">test</span>(<span class="string">&#x27;w&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg5.<span class="title function_">test</span>(<span class="string">&#x27;ww&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg5.<span class="title function_">test</span>(<span class="string">&#x27;www&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;-----------------------&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 6. &#123;n,m&#125;   n =&lt; 重复次数 &lt;= m</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> reg6 = <span class="regexp">/^w&#123;2,4&#125;$/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg6.<span class="title function_">test</span>(<span class="string">&#x27;w&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg6.<span class="title function_">test</span>(<span class="string">&#x27;ww&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg6.<span class="title function_">test</span>(<span class="string">&#x27;www&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg6.<span class="title function_">test</span>(<span class="string">&#x27;wwww&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg6.<span class="title function_">test</span>(<span class="string">&#x27;wwwww&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 7. 注意事项： 逗号两侧千万不要加空格否则会匹配失败</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="范围"><a href="#范围" class="headerlink" title="范围"></a>范围</h3><p>表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围</p>
 

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 元字符之范围  []  </span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. [abc] 匹配包含的单个字符， 多选1</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> reg1 = <span class="regexp">/^[abc]$/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg1.<span class="title function_">test</span>(<span class="string">&#x27;a&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg1.<span class="title function_">test</span>(<span class="string">&#x27;b&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg1.<span class="title function_">test</span>(<span class="string">&#x27;c&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg1.<span class="title function_">test</span>(<span class="string">&#x27;d&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg1.<span class="title function_">test</span>(<span class="string">&#x27;ab&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. [a-z] 连字符 单个</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> reg2 = <span class="regexp">/^[a-z]$/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg2.<span class="title function_">test</span>(<span class="string">&#x27;a&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg2.<span class="title function_">test</span>(<span class="string">&#x27;p&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg2.<span class="title function_">test</span>(<span class="string">&#x27;0&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg2.<span class="title function_">test</span>(<span class="string">&#x27;A&#x27;</span>))  <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 想要包含小写字母，大写字母 ，数字</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> reg3 = <span class="regexp">/^[a-zA-Z0-9]$/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg3.<span class="title function_">test</span>(<span class="string">&#x27;B&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg3.<span class="title function_">test</span>(<span class="string">&#x27;b&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg3.<span class="title function_">test</span>(<span class="number">9</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg3.<span class="title function_">test</span>(<span class="string">&#x27;,&#x27;</span>))  <span class="comment">// flase</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 用户名可以输入英文字母，数字，可以加下划线，要求 6~16位</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> reg4 = <span class="regexp">/^[a-zA-Z0-9_]&#123;6,16&#125;$/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg4.<span class="title function_">test</span>(<span class="string">&#x27;abcd1&#x27;</span>))  <span class="comment">// false </span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg4.<span class="title function_">test</span>(<span class="string">&#x27;abcd12&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg4.<span class="title function_">test</span>(<span class="string">&#x27;ABcd12&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg4.<span class="title function_">test</span>(<span class="string">&#x27;ABcd12_&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 3. [^a-z] 取反符</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> reg5 = <span class="regexp">/^[^a-z]$/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg5.<span class="title function_">test</span>(<span class="string">&#x27;a&#x27;</span>))  <span class="comment">// false </span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg5.<span class="title function_">test</span>(<span class="string">&#x27;A&#x27;</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(reg5.<span class="title function_">test</span>(<span class="number">8</span>))  <span class="comment">// true</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="字符类"><a href="#字符类" class="headerlink" title="字符类"></a>字符类</h3><p>某些常见模式的简写方式，区分字母和数字</p>


 

<h2 id="替换和修饰符"><a href="#替换和修饰符" class="headerlink" title="替换和修饰符"></a>替换和修饰符</h2><p>replace 替换方法，可以完成字符的替换</p>
 

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 替换和修饰符</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> str = <span class="string">&#x27;欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 替换  replace  需求：把前端替换为 web</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1.1 replace 返回值是替换完毕的字符串</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const strEnd = str.replace(/前端/, &#x27;web&#x27;) 只能替换一个</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等</p>
<ul>
<li>i 是单词 ignore 的缩写，正则匹配时字母不区分大小写</li>
<li>g 是单词 global 的缩写，匹配所有满足正则表达式的结果</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 替换和修饰符</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> str = <span class="string">&#x27;欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 替换  replace  需求：把前端替换为 web</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1.1 replace 返回值是替换完毕的字符串</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const strEnd = str.replace(/前端/, &#x27;web&#x27;) 只能替换一个</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 修饰符 g 全部替换</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> strEnd = str.<span class="title function_">replace</span>(<span class="regexp">/前端/g</span>, <span class="string">&#x27;web&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(strEnd) </span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="正则插件"><a href="#正则插件" class="headerlink" title="正则插件"></a>正则插件</h2> 



<h2 id="change-事件"><a href="#change-事件" class="headerlink" title="change 事件"></a>change 事件</h2><p>给input注册 change 事件，值被修改并且失去焦点后触发</p>
<h2 id="判断是否有类"><a href="#判断是否有类" class="headerlink" title="判断是否有类"></a>判断是否有类</h2> 

<p>元素.classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false</p>
<h1 id="九、数据处理"><a href="#九、数据处理" class="headerlink" title="九、数据处理"></a>九、数据处理</h1><h2 id="深浅拷贝"><a href="#深浅拷贝" class="headerlink" title="深浅拷贝"></a>深浅拷贝</h2><h3 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a>浅拷贝</h3><p>首先浅拷贝和深拷贝只针对引用类型</p>
<p><strong>浅拷贝：拷贝的是地址</strong></p>
<p>常见方法：</p>
<ol>
<li>拷贝对象：Object.assgin() / 展开运算符 {…obj} 拷贝对象</li>
<li>拷贝数组：Array.prototype.concat() 或者 […arr]</li>
</ol>
<blockquote>
<p>拷贝对象之后，里面的属性值：如果是简单数据类型则直接拷贝值，如果是引用数据类型则拷贝地址</p>
</blockquote>
<p>直接赋值和浅拷贝的区别？</p>
<ul>
<li>直接赋值的方法，只要是对象，都会相互影响，因为是直接拷贝对象栈里的地址</li>
<li>浅拷贝如果是一层对象，不互相影响，如果出现多层对象拷贝还是会互相影响</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> obj = &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">name</span>: <span class="string">&#x27;pink&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">age</span>: <span class="number">18</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 直接赋值会影响原对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> y = obj</span></span><br><span class="line"><span class="language-javascript">    y.<span class="property">age</span> = <span class="number">20</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(obj) <span class="comment">// &#123;name: &#x27;pink&#x27;, age: 20&#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(y)	<span class="comment">// 	&#123;name: &#x27;pink&#x27;, age: 20&#125;</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 采用浅拷贝</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 方式一</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> o = &#123;...obj&#125;</span></span><br><span class="line"><span class="language-javascript">    o.<span class="property">age</span> = <span class="number">22</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(obj) <span class="comment">// &#123;name: &#x27;pink&#x27;, age: 18&#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(o)	<span class="comment">// 	&#123;name: &#x27;pink&#x27;, age: 22&#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 方式二</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> x = <span class="title class_">Object</span>.<span class="title function_">assign</span>(x, obj)</span></span><br><span class="line"><span class="language-javascript">    x.<span class="property">age</span> = <span class="number">3</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(obj) <span class="comment">// &#123;name: &#x27;pink&#x27;, age: 18&#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(x)	<span class="comment">// 	&#123;name: &#x27;pink&#x27;, age: 3&#125;</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 多层对象的浅拷贝就出现问题了,它只会拷贝最外面一层的地址，而里面的一层还是会跟直接赋值一样影响原对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> obj2 = &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">name</span>: <span class="string">&#x27;pink&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">age</span>: <span class="number">18</span></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">family</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        	<span class="attr">baby</span>: <span class="string">&#x27;小pink&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    	&#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> n = <span class="title class_">Object</span>.<span class="title function_">assign</span>(n, obj2)</span></span><br><span class="line"><span class="language-javascript">    n.<span class="property">age</span> = <span class="number">30</span></span></span><br><span class="line"><span class="language-javascript">    n.<span class="property">family</span>.<span class="property">baby</span> = <span class="string">&#x27;老登&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(obj2) <span class="comment">// &#123;name: &#x27;pink&#x27;, age: 18, family: &#123;baby: &#x27;老登&#x27;&#125;&#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(n)	  <span class="comment">// &#123;name: &#x27;pink&#x27;, age: 30, family: &#123;baby: &#x27;老登&#x27;&#125;&#125;</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h3><p>首先浅拷贝和深拷贝只针对引用类型</p>
<p><strong>深拷贝：拷贝的是对象，不是地址</strong></p>
<p>常见方法：</p>
<ol>
<li>通过递归实现深拷贝</li>
<li>lodash/cloneDeep</li>
<li>通过JSON.stringify()实现</li>
</ol>
<h4 id="递归实现深拷贝"><a href="#递归实现深拷贝" class="headerlink" title="递归实现深拷贝"></a>递归实现深拷贝</h4><p>函数递归：</p>
<p>如果一个函数在内部可以调用其本身，那么这个函数就是递归函数</p>
<ul>
<li>简单理解:函数内部自己调用自己, 这个函数就是递归函数</li>
<li>递归函数的作用和循环效果类似</li>
<li>由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件 return</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> obj = &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">uname</span>: <span class="string">&#x27;pink&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">age</span>: <span class="number">18</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">hobby</span>: [<span class="string">&#x27;乒乓球&#x27;</span>, <span class="string">&#x27;足球&#x27;</span>],</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">family</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">baby</span>: <span class="string">&#x27;小pink&#x27;</span></span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> o = &#123;&#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 拷贝函数</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">deepCopy</span>(<span class="params">newObj, oldObj</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">for</span> (<span class="keyword">let</span> k <span class="keyword">in</span> oldObj) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 处理数组的问题  一定先写数组 在写 对象 不能颠倒</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">if</span> (oldObj[k] <span class="keyword">instanceof</span> <span class="title class_">Array</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          newObj[k] = []</span></span><br><span class="line"><span class="language-javascript">          <span class="comment">//  newObj[k] 接收 []  hobby</span></span></span><br><span class="line"><span class="language-javascript">          <span class="comment">//  oldObj[k]   [&#x27;乒乓球&#x27;, &#x27;足球&#x27;]</span></span></span><br><span class="line"><span class="language-javascript">          <span class="title function_">deepCopy</span>(newObj[k], oldObj[k])</span></span><br><span class="line"><span class="language-javascript">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (oldObj[k] <span class="keyword">instanceof</span> <span class="title class_">Object</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          newObj[k] = &#123;&#125;</span></span><br><span class="line"><span class="language-javascript">          <span class="title function_">deepCopy</span>(newObj[k], oldObj[k])</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="comment">//  k  属性名 uname age    oldObj[k]  属性值  18</span></span></span><br><span class="line"><span class="language-javascript">          <span class="comment">// newObj[k]  === o.uname  给新对象添加属性</span></span></span><br><span class="line"><span class="language-javascript">          newObj[k] = oldObj[k]</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">deepCopy</span>(o, obj) <span class="comment">// 函数调用  两个参数 o 新对象  obj 旧对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(o)</span></span><br><span class="line"><span class="language-javascript">    o.<span class="property">age</span> = <span class="number">20</span></span></span><br><span class="line"><span class="language-javascript">    o.<span class="property">hobby</span>[<span class="number">0</span>] = <span class="string">&#x27;篮球&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    o.<span class="property">family</span>.<span class="property">baby</span> = <span class="string">&#x27;老pink&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(obj)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>, <span class="number">23</span>] <span class="keyword">instanceof</span> <span class="title class_">Object</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 复习</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const obj = &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   uname: &#x27;pink&#x27;,</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   age: 18,</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   hobby: [&#x27;乒乓球&#x27;, &#x27;足球&#x27;]</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// function deepCopy(&#123; &#125;, oldObj) &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   // k 属性名  oldObj[k] 属性值</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   for (let k in oldObj) &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//     // 处理数组的问题   k 变量</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//     newObj[k] = oldObj[k]</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//     // o.uname = &#x27;pink&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//     // newObj.k  = &#x27;pink&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li><strong>深拷贝需要用到函数递归</strong></li>
<li><strong>当普通拷贝时直接赋值就好，遇到复杂对象的话，如果里面有数组时则调用这个递归函数，如果遇到对象形式则再次利用递归解决</strong></li>
<li><strong>先处理数组再处理对象，顺序不能颠倒</strong></li>
</ol>
<h4 id="lodash-cloneDeep"><a href="#lodash-cloneDeep" class="headerlink" title="lodash/cloneDeep"></a>lodash/cloneDeep</h4><p>引用第三方js库：库的 lodash 里面 cloneDeep() 内部实现了深拷贝</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 先引用 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./lodash.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> obj = &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">uname</span>: <span class="string">&#x27;pink&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">age</span>: <span class="number">18</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">hobby</span>: [<span class="string">&#x27;乒乓球&#x27;</span>, <span class="string">&#x27;足球&#x27;</span>],</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">family</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">baby</span>: <span class="string">&#x27;小pink&#x27;</span></span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> o = _.<span class="title function_">cloneDeep</span>(obj)</span></span><br><span class="line"><span class="language-javascript">    o.<span class="property">family</span>.<span class="property">baby</span> = <span class="string">&#x27;老pink&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(obj) <span class="comment">// &#123;uname: &#x27;pink&#x27;, age: 18, hobby: [&#x27;乒乓球&#x27;, &#x27;足球&#x27;], family: &#123;baby: &#x27;小pink&#x27;&#125;&#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(o)	 <span class="comment">// &#123;uname: &#x27;pink&#x27;, age: 18, hobby: [&#x27;乒乓球&#x27;, &#x27;足球&#x27;], family: &#123;baby: &#x27;老pink&#x27;&#125;&#125;</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="JSON-stringify"><a href="#JSON-stringify" class="headerlink" title="JSON.stringify()"></a>JSON.stringify()</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> obj = &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">uname</span>: <span class="string">&#x27;pink&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">age</span>: <span class="number">18</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">hobby</span>: [<span class="string">&#x27;乒乓球&#x27;</span>, <span class="string">&#x27;足球&#x27;</span>],</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">family</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">baby</span>: <span class="string">&#x27;小pink&#x27;</span></span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 通过 JSON.stringify() 的JSON序列化，把对象转换为 JSON 字符串</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// console.log(JSON.stringify(obj))</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> o = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj))</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(o)</span></span><br><span class="line"><span class="language-javascript">    o.<span class="property">family</span>.<span class="property">baby</span> = <span class="string">&#x27;123&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(obj)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="异常处理"><a href="#异常处理" class="headerlink" title="异常处理"></a>异常处理</h2><blockquote>
<p>了解 JavaScript 中程序异常处理的方法，提升代码运行的健壮性。</p>
</blockquote>
<h3 id="throw"><a href="#throw" class="headerlink" title="throw"></a>throw</h3><p>异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行</p>
<p>总结：</p>
<ol>
<li>throw 抛出异常信息，程序也会终止执行</li>
<li>throw 后面跟的是错误提示信息</li>
<li>Error 对象配合 throw 使用，能够设置更详细的错误信息</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">counter</span>(<span class="params">x, y</span>) &#123;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">if</span>(!x || !y) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// throw &#x27;参数不能为空!&#x27;;</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;参数不能为空!&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">return</span> x + y</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">counter</span>()</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="try-…-catch-…-finally"><a href="#try-…-catch-…-finally" class="headerlink" title="try … catch … finally"></a>try … catch … finally</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">   <span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">try</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 查找 DOM 节点</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> p = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.p&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        p.<span class="property">style</span>.<span class="property">color</span> = <span class="string">&#x27;red&#x27;</span></span></span><br><span class="line"><span class="language-javascript">      &#125; <span class="keyword">catch</span> (error) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// try 代码段中执行有错误时，会执行 catch 代码段</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 查看错误信息</span></span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(error.<span class="property">message</span>)</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 终止代码继续执行</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">return</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">finally</span> &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="comment">// 不管你程序对不对，一定会执行的代码</span></span></span><br><span class="line"><span class="language-javascript">          <span class="title function_">alert</span>(<span class="string">&#x27;执行&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;如果出现错误，我的语句不会执行&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">foo</span>()</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li><code>try...catch</code> 用于捕获错误信息</li>
<li>将预估可能发生错误的代码写在 <code>try</code> 代码段中</li>
<li>如果 <code>try</code> 代码段中出现错误后，会执行 <code>catch</code> 代码段，并截获到错误信息</li>
</ol>
<h3 id="debugger"><a href="#debugger" class="headerlink" title="debugger"></a>debugger</h3><p>相当于断点调试，直接在页面写debugger后，打开控制台调试时会自动跳转到代码的断点调试页面；</p>
<p>也可以先写console.log(“…”)，在控制台点击该打印结果页面，跳转到代码页，然后点击代码页左栏打断点调试</p>
<h2 id="处理this"><a href="#处理this" class="headerlink" title="处理this"></a>处理this</h2><blockquote>
<p>了解函数中 this 在不同场景下的默认值，知道动态指定函数 this 值的方法。</p>
</blockquote>
<p><code>this</code> 是 JavaScript 最具“魅惑”的知识点，不同的应用场合 <code>this</code> 的取值可能会有意想不到的结果，在此我们对以往学习过的关于【 <code>this</code> 默认的取值】情况进行归纳和总结。</p>
<h3 id="普通函数"><a href="#普通函数" class="headerlink" title="普通函数"></a>普通函数</h3><p><strong>普通函数</strong>的调用方式决定了 <code>this</code> 的值，即【谁调用 <code>this</code> 的值指向谁】，如下代码所示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 普通函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">sayHi</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 函数表达式</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> sayHello = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 函数的调用方式决定了 this 的值</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 全局作用域或者普通函数中 this 指向全局对象 window，注意定时器里的 this 指向 window</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">sayHi</span>() <span class="comment">// window</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">window</span>.<span class="title function_">sayHi</span>() <span class="comment">// window</span></span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">window</span>.<span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) <span class="comment">// window</span></span></span><br><span class="line"><span class="language-javascript">  &#125;, <span class="number">1000</span>)</span></span><br><span class="line"><span class="language-javascript">	</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="comment">// 普通对象</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> user = &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">name</span>: <span class="string">&#x27;小明&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">walk</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) </span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 动态为 user 添加方法</span></span></span><br><span class="line"><span class="language-javascript">  user.<span class="property">sayHi</span> = sayHi</span></span><br><span class="line"><span class="language-javascript">  uesr.<span class="property">sayHello</span> = sayHello</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 函数调用方式，决定了 this 的值</span></span></span><br><span class="line"><span class="language-javascript">  user.<span class="title function_">sayHi</span>()</span></span><br><span class="line"><span class="language-javascript">  user.<span class="title function_">sayHello</span>()</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>注： 普通函数没有明确调用者时 <code>this</code> 值为 <code>window</code>，严格模式下没有调用者时 <code>this</code> 的值为 <code>undefined</code>。</p>
<h3 id="箭头函数-1"><a href="#箭头函数-1" class="headerlink" title="箭头函数"></a>箭头函数</h3><p><strong>箭头函数</strong>中的 <code>this</code> 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 <code>this</code> ！箭头函数中访问的 <code>this</code> 不过是箭头函数所在作用域的 <code>this</code> 变量。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) <span class="comment">// 此处为 window</span></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 箭头函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> sayHi = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) <span class="comment">// 该箭头函数中的 this 为函数声明环境中 this 一致</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 普通对象</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> user = &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">name</span>: <span class="string">&#x27;小明&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 该箭头函数中的 this 为函数声明环境中 this 一致</span></span></span><br><span class="line"><span class="language-javascript">    <span class="attr">walk</span>: <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;,</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="attr">sleep</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">let</span> str = <span class="string">&#x27;hello&#x27;</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">let</span> <span class="title function_">fn</span> = (<span class="params"></span>) =&gt; &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(str)</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) <span class="comment">// 该箭头函数中的 this 与 sleep 中的 this 一致</span></span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 调用箭头函数</span></span></span><br><span class="line"><span class="language-javascript">      <span class="title function_">fn</span>();</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 动态添加方法</span></span></span><br><span class="line"><span class="language-javascript">  user.<span class="property">sayHi</span> = sayHi</span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 函数调用</span></span></span><br><span class="line"><span class="language-javascript">  user.<span class="title function_">sayHi</span>()</span></span><br><span class="line"><span class="language-javascript">  user.<span class="title function_">sleep</span>()</span></span><br><span class="line"><span class="language-javascript">  user.<span class="title function_">walk</span>()</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>在开发中【使用箭头函数前需要考虑函数中 <code>this</code> 的值】，<strong>事件回调函数</strong>使用箭头函数时，<code>this</code> 为全局的 <code>window</code>，因此<strong>DOM事件回调函数不推荐使用箭头函数</strong>，如下代码所示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;btn&quot;</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// DOM 节点</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> btn = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.btn&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 箭头函数 此时 this 指向了 window</span></span></span><br><span class="line"><span class="language-javascript">      btn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) <span class="comment">// window</span></span></span><br><span class="line"><span class="language-javascript">      &#125;)</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 普通函数 此时 this 指向了 DOM 对象</span></span></span><br><span class="line"><span class="language-javascript">      btn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) <span class="comment">// &lt;button class=&quot;btn&quot;&gt;按钮&lt;/button&gt;</span></span></span><br><span class="line"><span class="language-javascript">      &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>同样由于箭头函数 <code>this</code> 的原因，<strong>基于原型的面向对象也不推荐采用箭头函数</strong>，如下代码所示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 原型对像上添加了箭头函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">walk</span> = <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;人都要走路...&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// window</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> p1 = <span class="keyword">new</span> <span class="title class_">Person</span>()</span></span><br><span class="line"><span class="language-javascript">  p1.<span class="title function_">walk</span>()</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>函数内不存在this，沿用上一级的，过程：向外层作用域中，一层层查找 this，直到有 this 的定义</li>
<li>不适用：构造函数、原型函数、字面量对象中函数、dom事件函数</li>
<li>适用：需要使用上层 this 的地方</li>
</ol>
<h3 id="改变this指向"><a href="#改变this指向" class="headerlink" title="改变this指向"></a>改变this指向</h3><p>以上归纳了普通函数和箭头函数中关于 <code>this</code> 默认值的情形，不仅如此 JavaScript 中还允许指定函数中 <code>this</code> 的指向，有 3 个方法可以动态指定普通函数中 <code>this</code> 的指向：</p>
<h4 id="call"><a href="#call" class="headerlink" title="call"></a>call</h4><p>使用 <code>call</code> 方法调用函数，同时指定函数中 <code>this</code> 的值，使用方法如下代码所示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 普通函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">sayHi</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> user = &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">name</span>: <span class="string">&#x27;小明&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">age</span>: <span class="number">18</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> student = &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">name</span>: <span class="string">&#x27;小红&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">age</span>: <span class="number">16</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 调用函数并指定 this 的值</span></span></span><br><span class="line"><span class="language-javascript">  sayHi.<span class="title function_">call</span>(user); <span class="comment">// this 值为 user</span></span></span><br><span class="line"><span class="language-javascript">  sayHi.<span class="title function_">call</span>(student); <span class="comment">// this 值为 student</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 求和函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">counter</span>(<span class="params">x, y</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">return</span> x + y;</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 调用 counter 函数，并传入参数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> result = counter.<span class="title function_">call</span>(<span class="literal">null</span>, <span class="number">5</span>, <span class="number">10</span>);</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li><code>call</code> 方法能够在调用函数的同时指定 <code>this</code> 的值</li>
<li>使用 <code>call</code> 方法调用函数时，第1个参数为 <code>this</code> 指定的值</li>
<li><code>call</code> 方法的其余参数会依次自动传入函数做为函数的参数</li>
</ol>
<h4 id="apply"><a href="#apply" class="headerlink" title="apply"></a>apply</h4><p>使用 <code>call</code> 方法<strong>调用函数</strong>，同时指定函数中 <code>this</code> 的值，使用方法如下代码所示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 普通函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">sayHi</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> user = &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">name</span>: <span class="string">&#x27;小明&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">age</span>: <span class="number">18</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> student = &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">name</span>: <span class="string">&#x27;小红&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">age</span>: <span class="number">16</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 调用函数并指定 this 的值</span></span></span><br><span class="line"><span class="language-javascript">  sayHi.<span class="title function_">apply</span>(user) <span class="comment">// this 值为 user</span></span></span><br><span class="line"><span class="language-javascript">  sayHi.<span class="title function_">apply</span>(student) <span class="comment">// this 值为 student</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 求和函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">counter</span>(<span class="params">x, y</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">return</span> x + y</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 调用 counter 函数，并传入参数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> result = counter.<span class="title function_">apply</span>(<span class="literal">null</span>, [<span class="number">5</span>, <span class="number">10</span>])</span></span><br><span class="line"><span class="language-javascript">  <span class="variable language_">console</span>.<span class="title function_">log</span>(result)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li><code>apply</code> 方法能够在调用函数的同时指定 <code>this</code> 的值</li>
<li>使用 <code>apply</code> 方法调用函数时，第1个参数为 <code>this</code> 指定的值</li>
<li><code>apply</code> 方法第2个参数为<strong>数组</strong>，数组的单元值依次自动传入函数做为函数的参数</li>
</ol>
<h4 id="bind"><a href="#bind" class="headerlink" title="bind"></a>bind</h4><p><code>bind</code> 方法并<strong>不会调用函数</strong>，而是创建一个指定了 <code>this</code> 值的新函数，使用方法如下代码所示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 普通函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">function</span> <span class="title function_">sayHi</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> user = &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">name</span>: <span class="string">&#x27;小明&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">age</span>: <span class="number">18</span></span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 调用 bind 指定 this 的值</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">let</span> sayHello = sayHi.<span class="title function_">bind</span>(user);</span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 调用使用 bind 创建的新函数</span></span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">sayHello</span>()</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">  <span class="comment">// 需求：有个按钮，单击后禁用2秒再开启</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">const</span> btn = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.btn&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">  btn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 禁用按钮</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">this</span>.<span class="property">disabled</span> = <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">window</span>.<span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="comment">// 在这个普通函数里，我们要把this由原来的指向 window 改为 btn</span></span></span><br><span class="line"><span class="language-javascript">          <span class="variable language_">this</span>.<span class="property">disabled</span> = <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript">      &#125;.<span class="title function_">bind</span>(btn), <span class="number">2000</span>)</span></span><br><span class="line"><span class="language-javascript">      </span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 也可以改成箭头函数，因为箭头函数没有this,所以指向上一层的 btn</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// setTimeout(() =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">//     this.disabled = true</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// &#125;, 2000)</span></span></span><br><span class="line"><span class="language-javascript">  &#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>注：<code>bind</code> 方法创建新的函数，与原函数的唯一的变化是改变了 <code>this</code> 的值。</p>
<p>总结：</p>
<p>​    相同点：</p>
<p>​        都可以改变函数内部的 this 指向</p>
<p>​    不同点：</p>
<p>​        call 和 apply 会调用函数，并且改变函数内部 this 指向</p>
<p>​        call 和 apply 传递的参数不一样，call 传递参数 aru1，aru2.. 形式，apply 必须数组形式 [arg]</p>
<p>​        bind 不会调用函数，可以改变函数内部的 this 指向</p>
<p>​    应用场景：</p>
<p>​        call 可以调用函数并传参</p>
<p>​        apply 经常跟数组有关，比如借助数学对象实现数组最大值最小值</p>
<p>​        bind 不调用函数，但还想改变 this 指向，比如改变定时器内部的 this 指向</p>
<h2 id="防抖节流"><a href="#防抖节流" class="headerlink" title="防抖节流"></a>防抖节流</h2><h3 id="防抖（debounce）"><a href="#防抖（debounce）" class="headerlink" title="防抖（debounce）"></a>防抖（debounce）</h3><p>所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--&lt;script src=&quot;./js/lodash.min.js&quot;&gt;&lt;/script&gt;--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 利用防抖实现性能优化</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 鼠标在盒子上移动，利用防抖，实现鼠标停止500ms之后，里面的数字+1</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.box&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">let</span> i = <span class="number">1</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">function</span> <span class="title function_">mouseMove</span> () &#123;</span></span><br><span class="line"><span class="language-javascript">            box.<span class="property">innerHTML</span> = i++</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 如果里面存在大量消耗性能的代码，比如 dom 操作，数据处理等，可能造成卡顿</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 方法一：利用 lodash 库实现防抖 - 500 毫秒之后采取 + 1</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// box.addEventListener(&#x27;mousemove&#x27;, _.debounce(mouseMove, 500))</span></span></span><br><span class="line"><span class="language-javascript">        </span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 方法二：手写防抖函数</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 核心是利用 setTimeout 定时器来实现</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 1.声明定时器变量</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 2. 每次鼠标移动(事件触发》的时候都要先判断是否有定时器，如果有先清除以前的定时器</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 3.如果没有定时器，则开启定时器，存入到定时器变量里面</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 4.定时器里面写函数调用</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">function</span> <span class="title function_">debounce</span>(<span class="params">fn, t</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">let</span> timer</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">return</span> <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">if</span>(timer) <span class="built_in">clearTimeout</span>(timer)</span></span><br><span class="line"><span class="language-javascript">                timer = <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="title function_">fn</span>()</span></span><br><span class="line"><span class="language-javascript">                &#125;, t)</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    	box.<span class="title function_">addEventListener</span>(<span class="string">&#x27;mousemove&#x27;</span>, <span class="title function_">debounce</span>(mouseMove, <span class="number">500</span>))</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="节流（throttle）"><a href="#节流（throttle）" class="headerlink" title="节流（throttle）"></a>节流（throttle）</h3><p>所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--&lt;script src=&quot;./js/lodash.min.js&quot;&gt;&lt;/script&gt;--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 利用节流实现性能优化</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 鼠标在盒子上移动，利用节流，实现每经过500ms之后，数字才+1</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.box&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">let</span> i = <span class="number">1</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">function</span> <span class="title function_">mouseMove</span> () &#123;</span></span><br><span class="line"><span class="language-javascript">            box.<span class="property">innerHTML</span> = i++</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 如果里面存在大量消耗性能的代码，比如 dom 操作，数据处理等，可能造成卡顿</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 方法一：利用 lodash 库实现节流 - 500 毫秒之后采取 + 1</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// box.addEventListener(&#x27;mousemove&#x27;, _.throttle(mouseMove, 500))</span></span></span><br><span class="line"><span class="language-javascript">        </span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 方法二：手写节流函数</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 流的核心就是利用定时器(setTimeout) 来实现</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 1.声明一个定时器变量</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 2.当鼠标每次滑动都先判断是否有定时器了，如果有定时器则不开启新定时器，如果没有定时器则开启定时器，并存到变量里</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 3.1定时器里面调用执行的函数</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 3.2定时器里面要把定时器清空</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">function</span> <span class="title function_">throttle</span>(<span class="params">fn, t</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">let</span> timer = <span class="literal">null</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">return</span> <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">if</span> (!timer) &#123;</span></span><br><span class="line"><span class="language-javascript">                    timer = <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                        <span class="title function_">fn</span>()</span></span><br><span class="line"><span class="language-javascript">                        <span class="comment">// 清空定时器</span></span></span><br><span class="line"><span class="language-javascript">                        timer = <span class="literal">null</span></span></span><br><span class="line"><span class="language-javascript">                    &#125;, t)</span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">        box.<span class="title function_">addEventListener</span>( <span class="string">&#x27;mousemove&#x27;</span>,<span class="title function_">throttle</span>(mouseMove, <span class="number">500</span>))</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>总结：</p>




<h1 id="十、-jQuery"><a href="#十、-jQuery" class="headerlink" title="十、 jQuery"></a>十、 jQuery</h1><p>JavaScript库: 即 library，是一个封装好的特定的集合(方法和函数)。从封装一大函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取素等简单理解:就是一个JS 文件，里面对我们原生is代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了</p>
<p>比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)</p>
<p>常见的 JS 库：jQuery、prototype、YUI、Dojo、Ext JS、移动端的zepto</p>
<p>这些库都是对原生JavaScript的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。</p>
<h2 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h2><p>jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码做更多的事情。<br>j 就是 JavaScript；Query查询；意思就是查 js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。<br>jQuery 封装了JavaScript常用的功能代码，优化了DOM 操作、事件处理、动画设计和Aiax交互</p>
<p>学习jQuery本质: 就是学习调用这些函数(方法)<br>jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。</p>
<p>优点：</p>
<ul>
<li>轻量级。核心文件才几十kb，不会影响页面加载速度</li>
<li>跨浏览器兼容。基本兼容了现在主流的测览器</li>
<li>链式编程、隐式迭代</li>
<li>对事件、样式、动画支持，大大简化了DOM操作</li>
<li>支持插件扩展开发。有着丰富的第三方的插件，例如:树形菜单、日期控件、轮播图等</li>
<li>免费、开源</li>
</ul>
<h2 id="jQuery-的下载"><a href="#jQuery-的下载" class="headerlink" title="jQuery 的下载"></a>jQuery 的下载</h2><p>官网地址: <a target="_blank" rel="noopener" href="https://jquery.com/">https://jquery.com/</a><br>版本:<br>1x:兼容IE678等低版本浏览器，官网不再更新<br>2x:不兼容IE678等低版本浏览器，官网不再更新<br>3x:不兼容E678等低版本浏览器，是官方主要更新维护的版本<br>各个版本的下载:<a target="_blank" rel="noopener" href="https://codejquery.com/">https://codejquery.com/</a></p>
<p>将 jQuery 下载到项目中，然后<script src="jquery.min.js"></script>引用即可</p>
<h2 id="入口函数"><a href="#入口函数" class="headerlink" title="入口函数"></a>入口函数</h2><p>有传统和简写两种</p>
<ol>
<li>等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装</li>
<li>相当于原生is 中的DOMContentLoaded</li>
<li>$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用$</li>
<li>$ 是 jQuery 的顶级对象，相当于原生JavaScript中的 window。把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 的方法</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;jquery.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 传统写法</span></span></span><br><span class="line"><span class="language-javascript">    $(<span class="variable language_">document</span>).<span class="title function_">ready</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">        ... <span class="comment">// 此处是页面 DOM 加载完成的入口</span></span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 简写</span></span></span><br><span class="line"><span class="language-javascript">    $(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        ... <span class="comment">// 此处是页面 DOM 加载完成的入口</span></span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// $ 是 jQuery 的别称,同时也是 jQuery 的顶级对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">jQuery</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// $(&#x27;div&#x27;).hide()</span></span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">jQuery</span>(<span class="string">&#x27;div&#x27;</span>).<span class="title function_">hide</span>()</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="DOM-对象和-jQuery-对象"><a href="#DOM-对象和-jQuery-对象" class="headerlink" title="DOM 对象和 jQuery 对象"></a>DOM 对象和 jQuery 对象</h2><ul>
<li>DOM 对象: 用原生js获取过来的对象就是DOM对象</li>
<li>jQuery对象:  用jquery方式获取过来的对象是jQuery对象。 本质: 通过$把DOM元素进行了包装</li>
<li>juery 对象只能使用 jouery 方法，DOM 对象则使用原生的 javaScirpt 属性和方法</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1.DOM 对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> myDiv = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>); <span class="comment">// myDiv 是DOM对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">dir</span>(myDiv);</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2.jQuery对象</span></span></span><br><span class="line"><span class="language-javascript">    $(<span class="string">&#x27;div&#x27;</span>); <span class="comment">// $(div&#x27;)是一个 jQuery 对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">dir</span>($(<span class="string">&#x27;div&#x27;</span>))</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 3.juery 对象只能使用 jouery 方法，DOM 对象则使用原生的 javaScirpt 属性和方法</span></span></span><br><span class="line"><span class="language-javascript">    myDiv.<span class="property">style</span> .<span class="property">display</span> = <span class="string">&#x27;none&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">	<span class="comment">// myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法</span></span></span><br><span class="line"><span class="language-javascript">	<span class="comment">// $(&#x27;div&#x27;).style.display =none&#x27;;这个$(div&#x27;)是一个jouery对象不能使用原生is 的属性和方法</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>DOM 对象与 jQuery 对象之间是可以相互转换的</p>
<p>因为原生 js 比 jQuery 更大，原生的一些属性和方法 jQuery 没有给我们封装.要想使用这些属性和方法需要把 jQuery 对象转换为DOM对象才能使用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1.DOM对象转换为 jQuery对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// (1) 我们直接获取视频，得到就是jQuery对象</span></span></span><br><span class="line"><span class="language-javascript">	<span class="comment">// $(&#x27;video&#x27;);</span></span></span><br><span class="line"><span class="language-javascript">	<span class="comment">// (2) 我们已经使用原生js 获取过来 DOM对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> myvideo = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>( <span class="string">&#x27;video&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">   	$(myvideo)</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// $(myvideo).play(); // 报错，jquery里面没有play 这个方法</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. jQuery对象转换为DOM对像,有两种方式</span></span></span><br><span class="line"><span class="language-javascript">    $(<span class="string">&#x27;video&#x27;</span>)[<span class="number">0</span>].<span class="title function_">play</span>()</span></span><br><span class="line"><span class="language-javascript">    $(<span class="string">&#x27;video&#x27;</span>).<span class="title function_">get</span>(<span class="number">0</span>).<span class="title function_">play</span>()</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h2><h3 id="基本选择器"><a href="#基本选择器" class="headerlink" title="基本选择器"></a>基本选择器</h3>



<p>遍历内部DOM元素(伪数组形式存储)的过程就叫做<strong>隐式选代</strong></p>
<p>简单理解:给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作方便我们调用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>惊喜不，意外不<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>惊喜不，意外不<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>惊喜不，意外不<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>相同的操作<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>相同的操作<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>相同的操作<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 获取四个 div 元素</span></span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>($(<span class="string">&#x27;.div&#x27;</span>))</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 2.给四个div设置背景颜色为粉色 jquery对象不能使用style</span></span></span><br><span class="line"><span class="language-javascript">        $(<span class="string">&quot;div&quot;</span>).<span class="title function_">css</span>(<span class="string">&quot;background&quot;</span>,<span class="string">&quot;pink&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 3.隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法</span></span></span><br><span class="line"><span class="language-javascript">        $(<span class="string">&quot;ul li&quot;</span>).<span class="title function_">css</span>(<span class="string">&quot;color&quot;</span>,<span class="string">&quot;red&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h3 id="筛选选择器"><a href="#筛选选择器" class="headerlink" title="筛选选择器"></a>筛选选择器</h3>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">li</span>&gt;</span>多个里面筛选几个<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        &lt;liJ多个里面筛选几个<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>多个里面筛选几个<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>多个里面筛选几个<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>多个里面筛选几个<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>多个里面筛选几个<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">li</span>&gt;</span>多个里面筛选几个<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>多个里面筛选几个<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>多个里面筛选几个<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>多个里面筛选几个<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>多个里面筛选几个<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>多个里面筛选几个<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">o1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        $(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;ul li:first&#x27;</span>).<span class="title function_">css</span>(<span class="string">&#x27;color&#x27;</span>, <span class="string">&#x27;red&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;ul li:eq(2)&#x27;</span>).<span class="title function_">css</span>(<span class="string">&#x27;color&#x27;</span>, <span class="string">&#x27;blue&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;ul li:odd&#x27;</span>).<span class="title function_">css</span>(<span class="string">&#x27;color&#x27;</span>, <span class="string">&#x27;skyblue&#x27;</span>) <span class="comment">// 奇数（注意：第一行从0开始计数的）</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;ul li:even&#x27;</span>).<span class="title function_">css</span>(<span class="string">&#x27;color&#x27;</span>, <span class="string">&#x27;pink&#x27;</span>) <span class="comment">// 偶数</span></span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h3 id="筛选方法（重点）"><a href="#筛选方法（重点）" class="headerlink" title="筛选方法（重点）"></a><strong>筛选方法（重点）</strong></h3>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;yeye&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">        	<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span>儿子<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;nav&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>我是屁<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>我是p<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>0<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        $(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 父 parent() 返回的是最近一级的父级元素，亲爸爸</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>($(<span class="string">&#x27;.son&#x27;</span>).<span class="title function_">parent</span>()) <span class="comment">// father</span></span></span><br><span class="line"><span class="language-javascript">            </span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 子</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 亲儿子 children() 类似子代选择器  ul&gt;li</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;.nav&#x27;</span>).<span class="title function_">children</span>(<span class="string">&#x27;p&#x27;</span>).<span class="title function_">css</span>(<span class="string">&#x27;color&#x27;</span>, <span class="string">&#x27;red&#x27;</span>) <span class="comment">// &#x27;我是屁&#x27;字体变红</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 可以选所有孩子，包括儿子孙子 find() 类似后代选择器</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;.nav&#x27;</span>).<span class="title function_">find</span>(<span class="string">&#x27;p&#x27;</span>).<span class="title function_">css</span>(<span class="string">&#x27;color&#x27;</span>, <span class="string">&#x27;pink&#x27;</span>) <span class="comment">// &#x27;我是屁、我是p&#x27;字体都变红</span></span></span><br><span class="line"><span class="language-javascript">            </span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 兄弟 siblings 除了自身元素之外的所有亲兄弟</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;ol .item&#x27;</span>).<span class="title function_">siblings</span>(<span class="string">&#x27;li&#x27;</span>).<span class="title function_">css</span>(<span class="string">&#x27;color&#x27;</span>, <span class="string">&#x27;blue&#x27;</span>) <span class="comment">// 0、2字体变蓝</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 第n个元素 eq()</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;ol .item:eq(1)&#x27;</span>).<span class="title function_">css</span>(<span class="string">&#x27;color&#x27;</span>, <span class="string">&#x27;yellow&#x27;</span>) <span class="comment">// 1 变黄</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;ol .item&#x27;</span>).<span class="title function_">eq</span>(<span class="number">1</span>).<span class="title function_">css</span>(<span class="string">&#x27;color&#x27;</span>, <span class="string">&#x27;yellow&#x27;</span>) <span class="comment">// 1 变黄（更推荐这种方式写，因为eq比较灵活）</span></span></span><br><span class="line"><span class="language-javascript">            </span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 判断是否有某个类名</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>($(<span class="string">&#x27;div:first&#x27;</span>).<span class="title function_">hasClass</span>(<span class="string">&#x27;current&#x27;</span>)) <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="排它思想"><a href="#排它思想" class="headerlink" title="排它思想"></a>排它思想</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span>&gt;</span>快速<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span>&gt;</span>快速<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span>&gt;</span>快速<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span>&gt;</span>快速<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span>&gt;</span>快速<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span>&gt;</span>快速<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        $(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 隐式迭代 给所有的按钮都绑定了点击事件,点击了按钮后改变该按钮字体颜色</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;button&#x27;</span>).<span class="title function_">click</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 当前的元素变化字体颜色</span></span></span><br><span class="line"><span class="language-javascript">                $(<span class="variable language_">this</span>).<span class="title function_">css</span>(<span class="string">&#x27;color&#x27;</span>, <span class="string">&#x27;pink&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 其余兄弟去掉字体颜色</span></span></span><br><span class="line"><span class="language-javascript">                $(<span class="variable language_">this</span>).<span class="title function_">siblings</span>(<span class="string">&#x27;button&#x27;</span>).<span class="title function_">css</span>(<span class="string">&#x27;color&#x27;</span>, <span class="string">&#x27;&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">                </span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 链式编程: 将上面两步骤合并为一步</span></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// $(this).css(&#x27;color&#x27;, &#x27;pink&#x27;).siblings(&#x27;button&#x27;).css(&#x27;color&#x27;, &#x27;&#x27;)</span></span></span><br><span class="line"><span class="language-javascript">            &#125;)</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="操作-CSS-样式"><a href="#操作-CSS-样式" class="headerlink" title="操作 CSS 样式"></a>操作 CSS 样式</h2><p>jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式<br>1.参数只写属性名，则是返回属性值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="variable language_">this</span>).<span class="title function_">css</span>(<span class="string">&quot;color&quot;</span>);</span><br></pre></td></tr></table></figure>

<p>2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="variable language_">this</span>).<span class="title function_">css</span>(<span class="string">&quot;color&quot;</span>, <span class="string">&quot;red&quot;</span>)</span><br></pre></td></tr></table></figure>

<p>3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号（但要用驼峰写法）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="variable language_">this</span>).<span class="title function_">css</span>(&#123; <span class="string">&quot;color&quot;</span>:<span class="string">&quot;white&quot;</span>, <span class="string">&quot;font-size&quot;</span>:<span class="string">&quot;20px&quot;</span>&#125;)</span><br><span class="line">$(<span class="variable language_">this</span>).<span class="title function_">css</span>(&#123; <span class="attr">color</span>: white, <span class="attr">fontSize</span>: 20px&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="操作-类"><a href="#操作-类" class="headerlink" title="操作 类"></a>操作 类</h2><p>作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点</p>
<p>1.添加类：addClass()，不会覆盖前面存在的类</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">&#x27;div&#x27;</span>).<span class="title function_">addClass</span>(<span class="string">&#x27;current&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>2.移除类：removeClass()</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">&#x27;div&#x27;</span>).<span class="title function_">removeClass</span>(<span class="string">&#x27;current&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>3.切换类：toggleClass()</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">&#x27;div&#x27;</span>).<span class="title function_">toggleClass</span>(<span class="string">&#x27;current&#x27;</span>)</span><br></pre></td></tr></table></figure>

<h2 id="操作属性"><a href="#操作属性" class="headerlink" title="操作属性"></a>操作属性</h2><p>所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的 href，比如 <input>元素里面的 type。</a></p>
<ol>
<li><strong>获取属性语法</strong></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取属性</span></span><br><span class="line"><span class="title function_">prop</span>(<span class="string">&quot;属性&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取自定义属性，类似于原生js的getAttribute()</span></span><br><span class="line"><span class="title function_">attr</span>()</span><br></pre></td></tr></table></figure>

<ol start="2">
<li><strong>设置属性语法</strong></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">prop</span>(<span class="string">&quot;属性&quot;</span>,<span class="string">&quot;属性值&quot;</span>)</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;jQuery.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;http://www.itcast.cn&quot;</span> <span class="attr">title</span>=<span class="string">&quot;都挺好&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">name</span>=<span class="string">&quot;&quot;</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">checked</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">index</span>=<span class="string">&quot;1&quot;</span> <span class="attr">data-index</span>=<span class="string">&quot;2&quot;</span>&gt;</span>自定义属性<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        $(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// element.prop(&quot;属性名&quot;) 获取属性值</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>($(<span class="string">&#x27;a&#x27;</span>).<span class="title function_">prop</span>(<span class="string">&#x27;href&#x27;</span>)) <span class="comment">// http://www.itcast.cn</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;input&#x27;</span>).<span class="title function_">change</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 获取是否点击了单选框，点击了打印 true,没点击则打印 false</span></span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>($(<span class="variable language_">this</span>).<span class="title function_">prop</span>(<span class="string">&#x27;checked&#x27;</span>))</span></span><br><span class="line"><span class="language-javascript">            &#125;)</span></span><br><span class="line"><span class="language-javascript">            </span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>($(<span class="string">&#x27;div&#x27;</span>).<span class="title function_">prop</span>(<span class="string">&#x27;index&#x27;</span>)) <span class="comment">// undefined (获取不到自定义属性)</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 元素的自定义属性，我们通过 attr() 获取</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>($(<span class="string">&#x27;div&#x27;</span>).<span class="title function_">attr</span>(<span class="string">&#x27;index&#x27;</span>)) <span class="comment">// 1</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>($(<span class="string">&#x27;div&#x27;</span>).<span class="title function_">attr</span>(<span class="string">&#x27;data-index&#x27;</span>)) <span class="comment">// 2</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 设置自定义属性</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;div&#x27;</span>).<span class="title function_">attr</span>(<span class="string">&#x27;index&#x27;</span>, <span class="number">4</span>) <span class="comment">// &lt;div index=&quot;4&quot;&gt;自定义属性&lt;/div&gt;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="操作数据"><a href="#操作数据" class="headerlink" title="操作数据"></a>操作数据</h2><p>data() 方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。</p>
<h3 id="获取、添加数据"><a href="#获取、添加数据" class="headerlink" title="获取、添加数据"></a>获取、添加数据</h3><ul>
<li>获取数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">date</span>(<span class="string">&quot;name&#x27;) // 向被选元素获取数据</span></span><br></pre></td></tr></table></figure>

<ul>
<li>添加数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">data</span>(<span class="string">&quot;name&quot;</span>,<span class="string">&quot;value&quot;</span>)  <span class="comment">//向被选元素附加数据</span></span><br></pre></td></tr></table></figure>

<p>同时，还可以读取HTML5自定义属性 data-index，得到的是数字型</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;jQuery.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">data-index</span>=<span class="string">&quot;33&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        $(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;span&#x27;</span>).<span class="title function_">data</span>(<span class="string">&#x27;uname&#x27;</span>, <span class="string">&#x27;andy&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>($(<span class="string">&#x27;span&#x27;</span>).<span class="title function_">data</span>(<span class="string">&#x27;uname&#x27;</span>)) <span class="comment">// andy</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 这个方法获取 data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>($(<span class="string">&#x27;span&#x27;</span>).<span class="title function_">data</span>(<span class="string">&#x27;index&#x27;</span>)) <span class="comment">// 33</span></span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="设置内容文本值"><a href="#设置内容文本值" class="headerlink" title="设置内容文本值"></a>设置内容文本值</h3><p>主要针对元素的内容还有表单的值操作</p>
<p>普通元素内容 **html()**（相当于原生 innerHTML）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;jQuery.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>111<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">value</span>=<span class="string">&quot;请输入内容&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        $(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 1. 获取设置元素内容 html()</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;div&#x27;</span>).<span class="title function_">html</span>(<span class="string">&#x27;123&#x27;</span>) <span class="comment">// &lt;div&gt;123&lt;/div&gt;</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>($(<span class="string">&#x27;div&#x27;</span>).<span class="title function_">html</span>()) <span class="comment">// 123</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 2. 获取设置元素文本内容 text()</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;div&#x27;</span>).<span class="title function_">text</span>(<span class="string">&#x27;333&#x27;</span>) <span class="comment">// &lt;div&gt;333&lt;/div&gt;</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 3. 获取设置表单值 val()</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;input&#x27;</span>).<span class="title function_">val</span>(<span class="string">&#x27;yyy&#x27;</span>) <span class="comment">// &lt;input type=&quot;text&quot; value=&quot;yyy&quot;&gt;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="遍历元素"><a href="#遍历元素" class="headerlink" title="遍历元素"></a>遍历元素</h3><p>jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历.</p>
<p>语法1：**$(…).each()**，可遍历匹配的每一个元素。主要用于DOM处理</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">&quot;div&quot;</span>).<span class="title function_">each</span>(<span class="keyword">function</span> (<span class="params">index，domEle</span>) &#123; xxx &#125; )</span><br></pre></td></tr></table></figure>

<p>index：每个元素的索引号；</p>
<p>demEle：每个DOM元素对象，不是 query 对象；</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;jQuery.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        $(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// $(&quot;div&quot;).css(&quot;color&quot;,&quot;red&quot;);</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 如果针对于同一类元素做不同操作，需要用到遍历元素(类似for，但是比for强大)</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">let</span> sum = <span class="number">0</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 1.each() 方法遍历元素</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&quot;div&quot;</span>).<span class="title function_">each</span>(<span class="keyword">function</span>(<span class="params">i, domEle</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称</span></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// console.log(index);</span></span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(i) <span class="comment">// 0 1 2</span></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 回函数第二个参数一定是 dom元素对象</span></span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(domEle) <span class="comment">// &lt;div&gt;1&lt;/div&gt;&lt;div&gt;2&lt;/div&gt;&lt;div&gt;3&lt;/div&gt;</span></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// domEle.css(&quot;color&quot;) 报错，因为dom对象没有css方法</span></span></span><br><span class="line"><span class="language-javascript">                $(domEle).<span class="title function_">css</span>(<span class="string">&quot;color&quot;</span>,<span class="string">&quot;blue&quot;</span>) <span class="comment">// &lt;div style=&quot;color: blue;&quot;&gt;1&lt;/div&gt; ...</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// sum += $(domEle).text() // 0123 不加转换的话会变成字符串相连</span></span></span><br><span class="line"><span class="language-javascript">                sum += <span class="built_in">parseInt</span>($(domEle).<span class="title function_">text</span>())</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// sum += +$(domEle).text() // 这种写法也可以转成整型</span></span></span><br><span class="line"><span class="language-javascript">            &#125;)</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(sum) <span class="comment">// 6</span></span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>语法2：**$.each()**</p>
<p>$.each() 方法可用于遍历任何对象。主要用于数据处理，比如数组，对象</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$.<span class="title function_">each</span>(object ,<span class="keyword">function</span> (<span class="params">index,element</span>) &#123; xxx; &#125;）</span><br></pre></td></tr></table></figure>

<p>index：每个元素的索引号；</p>
<p>element：遍历内容；</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;jQuery.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        $(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 如果针对于同一类元素做不同操作，需要用到遍历元素(类似for，但是比for强大)</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">let</span> arr = [<span class="string">&#x27;green&#x27;</span>, <span class="string">&#x27;blue&#x27;</span>, <span class="string">&#x27;yellow&#x27;</span>]</span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&quot;div&quot;</span>).<span class="title function_">each</span>(<span class="keyword">function</span>(<span class="params">i, domEle</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 2.$.each() 方法遍历元素 主要用于遍历数据，处理数据</span></span></span><br><span class="line"><span class="language-javascript">                $.<span class="title function_">each</span>($(<span class="string">&quot;div&quot;</span>), <span class="keyword">function</span>(<span class="params">i, ele</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(i); <span class="comment">// 0 1 2</span></span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(ele); <span class="comment">// &lt;div&gt;1&lt;/div&gt; &lt;div&gt;2&lt;/div&gt; &lt;div&gt;3&lt;/div&gt;</span></span></span><br><span class="line"><span class="language-javascript">                &#125;)</span></span><br><span class="line"><span class="language-javascript">                $.<span class="title function_">each</span>(arr,<span class="keyword">function</span>(<span class="params">i, ele</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(i); <span class="comment">// 0 1 2</span></span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(ele); <span class="comment">// green blue yellow</span></span></span><br><span class="line"><span class="language-javascript">                &#125;)</span></span><br><span class="line"><span class="language-javascript">                $.<span class="title function_">each</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">name</span>: <span class="string">&#x27;andy&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">age</span>: <span class="number">18</span></span></span><br><span class="line"><span class="language-javascript">                &#125;, <span class="keyword">function</span> (<span class="params">i, ele</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(i); <span class="comment">// name age</span></span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(ele); <span class="comment">// andy 18</span></span></span><br><span class="line"><span class="language-javascript">                &#125;)</span></span><br><span class="line"><span class="language-javascript">            &#125;)</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="创建、添加、删除元素"><a href="#创建、添加、删除元素" class="headerlink" title="创建、添加、删除元素"></a>创建、添加、删除元素</h3><p>创建元素：$(“<li></li>“)</p>
<p>内部添加：element.append(“内容”)，把内容放到匹配元素最后面，类似于原生 appendChild</p>
<p>外部添加：after(“内容”) 放后面，before(“内容”) 放前面</p>
<p>删除元素：remove() 删除匹配的元素（本身）、empty() 删除匹配的元素集合中的所有子节点，html(“”) 清空匹配的元素内容</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;jQuery.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>原先的li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;test&quot;</span>&gt;</span>我是原来的div<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        $(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 1. 创建元素</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">let</span> li = $(<span class="string">&quot;&lt;li&gt;我是后来创建的li&lt;/li&gt;&quot;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 2.添加元素</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// (1) 内部添加</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&quot;ul&quot;</span>).<span class="title function_">append</span>(li) <span class="comment">// 内部添加并且放到内容的最后面</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// $(&quot;u1&quot;).prepend(li); // 内部添加并且放到内容的最前面</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// (2) 外部添加</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">let</span> div = $(<span class="string">&quot;&lt;div&gt;我是后妈生的&lt;/div&gt;&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&quot;.test&quot;</span>).<span class="title function_">after</span>(div) <span class="comment">// 添加到后面</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// $(&quot;.test&quot;).before(div) // 添加到前面</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 3.删除元素</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// $(&quot;ul&quot;).remove() // 可以删除匹配的元素 自杀</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// $(&quot;ul&quot;).empty() // 可以删除匹配的元素里面的子节点 孩子</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&quot;u1&quot;</span>).<span class="title function_">html</span>(<span class="string">&quot;&quot;</span>) <span class="comment">// 可以删除匹配的元素里面的子节点 孩子</span></span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="jQuery-效果"><a href="#jQuery-效果" class="headerlink" title="jQuery 效果"></a>jQuery 效果</h2><p>这部分去官网的 jQuery API 查看即可：</p>
<p><a target="_blank" rel="noopener" href="https://jquery.cuishifeng.cn/">jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)</a></p>




<h2 id="jQuery-位置"><a href="#jQuery-位置" class="headerlink" title="jQuery 位置"></a>jQuery 位置</h2><p>位置主要有三个: offset()、position()、scrollTop()/scrollLeft()</p>
<ol>
<li>offset() 设置或获取元素偏移</li>
</ol>
<p>offset0方法设置或返回被选素相对于文档的偏移坐标，跟父级没有关系</p>
<p>该方法有2个属性left、top。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离</p>
<p>可以设置元素的偏移:offset({top:10,left: 30);</p>
<ol start="2">
<li><p>position() 获取元素偏移</p>
<p>position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准</p>
</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;jQuery.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        $(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 1. 获取设置距离文档的位置（偏移）offset</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>($(<span class="string">&#x27;.son&#x27;</span>).<span class="title function_">offset</span>()) <span class="comment">// &#123;top: 10, left: 8&#125;</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// console.log($(&#x27;.son&#x27;).offset().left) // 8</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;.son&#x27;</span>).<span class="title function_">offset</span>(&#123; <span class="comment">// 修改盒子位置</span></span></span><br><span class="line"><span class="language-javascript">                <span class="attr">top</span>: <span class="number">200</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">left</span>: <span class="number">200</span></span></span><br><span class="line"><span class="language-javascript">            &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 2. 获取距离带有定位父级元素位置（偏移）position,如果没有带定位的父级，则以文档为主</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>($(<span class="string">&#x27;.son&#x27;</span>).<span class="title function_">position</span>()) <span class="comment">// &#123;top: 10, left: 8&#125;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="jQuery-事件"><a href="#jQuery-事件" class="headerlink" title="jQuery 事件"></a>jQuery 事件</h2><h3 id="单个事件注册"><a href="#单个事件注册" class="headerlink" title="单个事件注册"></a>单个事件注册</h3><p>语法:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">element.事件(<span class="keyword">function</span>(<span class="params"></span>)&#123;&#125;)</span><br><span class="line">$(<span class="string">&quot;div&quot;</span>).<span class="title function_">click</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;事件处理程序&#125;)</span><br></pre></td></tr></table></figure>

<p>其他事件和原生基本一致</p>
<h3 id="多个事件注册"><a href="#多个事件注册" class="headerlink" title="多个事件注册"></a>多个事件注册</h3><p>on() 方法：在匹配元素上绑定一个或多个事件的事件处理函数<br>语法:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">element.<span class="title function_">on</span>(events,[selector],fn)</span><br></pre></td></tr></table></figure>

<ol>
<li>events：一个或多个用格分隔的事件类型，如”click”或”keydown”</li>
<li>selector：元素的子元素选择器</li>
<li>fn：回调函数即绑定在元素身上的侦听函数</li>
</ol>
<p>优势1：可以绑定多个事件，多个处理事件处理程序</p>
<p>优势2：可以事件委派操作。事件委派的定义就是：把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>我们都是好孩子<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>我们都是好孩子<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>我们都是好孩子<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>我们都是好孩子<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>我们都是好孩子<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        $(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 1. 单个事件注册</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// $(&quot;div&quot;).click(function() &#123;</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//     $(this).css(&quot;background&quot;, &quot;purple&quot;);</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// &#125;);</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// $(&quot;div&quot;).mouseenter(function() &#123;</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//     $(this).css(&quot;background&quot;, &quot;skyblue&quot;);</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// &#125;);</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 2. 事件处理on</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// (1) on可以绑定1个或者多个事件处理程序</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// $(&quot;div&quot;).on(&#123;</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//     mouseenter: function() &#123;</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//         $(this).css(&quot;background&quot;, &quot;skyblue&quot;);</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//     &#125;,</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//     click: function() &#123;</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//         $(this).css(&quot;background&quot;, &quot;purple&quot;);</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//     &#125;,</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//     mouseleave: function() &#123;</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//         $(this).css(&quot;background&quot;, &quot;blue&quot;);</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//     &#125;</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// &#125;);</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&quot;div&quot;</span>).<span class="title function_">on</span>(<span class="string">&quot;mouseenter mouseleave&quot;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                $(<span class="variable language_">this</span>).<span class="title function_">toggleClass</span>(<span class="string">&quot;current&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">            &#125;);</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// (2) on可以实现事件委托（委派）</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// $(&quot;ul li&quot;).click();</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&quot;ul&quot;</span>).<span class="title function_">on</span>(<span class="string">&quot;click&quot;</span>, <span class="string">&quot;li&quot;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">alert</span>(<span class="number">11</span>);</span></span><br><span class="line"><span class="language-javascript">            &#125;);</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// (3) on可以给未来动态创建的元素绑定事件</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// $(&quot;ol li&quot;).click(function() &#123;</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//     alert(11);</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// &#125;)</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&quot;ol&quot;</span>).<span class="title function_">on</span>(<span class="string">&quot;click&quot;</span>, <span class="string">&quot;li&quot;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">alert</span>(<span class="number">11</span>);</span></span><br><span class="line"><span class="language-javascript">            &#125;)</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">var</span> li = $(<span class="string">&quot;&lt;li&gt;我是后来创建的&lt;/li&gt;&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&quot;ol&quot;</span>).<span class="title function_">append</span>(li);</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="自动触发事件"><a href="#自动触发事件" class="headerlink" title="自动触发事件"></a>自动触发事件</h3><p>有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">element.<span class="title function_">click</span>() <span class="comment">//第一种简写形式</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">element.<span class="title function_">trigger</span>(<span class="string">&quot;type&quot;</span>) <span class="comment">// 第二种自动触发模式</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">&quot;p&quot;</span>).<span class="title function_">on</span>(<span class="string">&quot;click&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;<span class="title function_">alert</span>(<span class="string">&quot;hi~&quot;</span>);&#125;);</span><br><span class="line">$(<span class="string">&quot;p&quot;</span>).<span class="title function_">trigger</span>(<span class="string">&quot;click&quot;</span>); <span class="comment">// 此时自动触发点击事件，不需要鼠标点击</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">element.<span class="title function_">triggerHandler</span>(type) <span class="comment">// 第三种自动触发模式, 但不会触发默认行为</span></span><br></pre></td></tr></table></figure>

<h3 id="事件对象-1"><a href="#事件对象-1" class="headerlink" title="事件对象"></a>事件对象</h3><p>事件被触发，就会有事件对象的产生</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">element.<span class="title function_">on</span>(events,[selector],<span class="keyword">function</span>(<span class="params">event</span>) &#123;&#125;)</span><br></pre></td></tr></table></figure>

<p>阻止默认行为:event.preventDefault() 或者 return false </p>
<p>阻止冒泡:event.stopPropagation0</p>
<h3 id="对象拷贝"><a href="#对象拷贝" class="headerlink" title="对象拷贝"></a>对象拷贝</h3><p>语法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$.<span class="title function_">extend</span>([deep]，target，object1，[objectN])</span><br></pre></td></tr></table></figure>

<ol>
<li>deep：如果设为true为深拷贝，默认为 false 浅拷贝</li>
<li>target：要拷贝的目标对象</li>
<li>object1：待拷贝到第一个对象的对象</li>
<li>objectN：待拷贝到第N个对象的对象</li>
<li><strong>浅拷贝</strong>是把被拷贝的对象<strong>复杂数据类型中的地址</strong>拷贝给目标对象，修改目标对象<strong>会影响</strong>被拷贝对象</li>
<li><strong>深拷贝</strong>，前面加true，完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;jQuery.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        $(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">var</span> targetobj = &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">id</span>: <span class="number">0</span></span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">var</span> obj = &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">id</span>: <span class="number">1</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">name</span>: <span class="string">&quot;andy&quot;</span></span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// $.extend(target, obj);</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// $.extend(targetobj, obj);</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// console.log(targetobj); // targetobj = &#123;id: 1, name: &#x27;andy&#x27;&#125; 会覆盖 targetobj 里面原来的数据</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// console.log(obj) // obj = &#123;id: 1, name: &#x27;andy&#x27;&#125;</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// // 1. 浅拷贝: 把原来对象里面的复杂数据类型地址拷贝给目标对象</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// targetobj.name = &#x27;mike&#x27;</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// console.log(targetobj); // obj = &#123;id: 1, name: &#x27;mike&#x27;&#125;</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// console.log(obj) // obj = &#123;id: 1, name: &#x27;mike&#x27;&#125;</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 2.深拷贝: 把里面的数据完全复制一份给目标对氯 如果里面有不冲突的属性,会合并到一起</span></span></span><br><span class="line"><span class="language-javascript">            $.<span class="title function_">extend</span>(<span class="literal">true</span>,targetobj,obj);</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// console.log(targetobj); // 会覆盖targetobj 里面原来的数据</span></span></span><br><span class="line"><span class="language-javascript">            targetobj.<span class="property">id</span> = <span class="number">100</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(targetobj); <span class="comment">// &#123;id: 100, name: &#x27;andy&#x27;&#125;</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(obj); <span class="comment">// &#123;id: 1, name: &#x27;andy&#x27;&#125;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="多库共存"><a href="#多库共存" class="headerlink" title="多库共存"></a>多库共存</h3><p>问题概述:</p>
<p>jQuery使用$作为标示符，随着Query的流行,其他js 库也会用这$作为标识符，这样一起使用会引起冲突</p>
<p>客观需求:</p>
<p>需要一个解决方案，让Query 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存</p>
<p>jQuery 解决方案：</p>
<p>1.把里面的$符号统一改为jQuery。比如 jQuery(div”)</p>
<p>2.jQuery变量规定新的名称:$.noConflict0var xx = $.noConflict();</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;jQuery.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        $(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">function</span> <span class="title function_">$</span>(<span class="params">ele</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">return</span> <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(ele)</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>($(<span class="string">&quot;div&quot;</span>))</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 1.如果$ 符号冲突 我们就使用 jQuery</span></span></span><br><span class="line"><span class="language-javascript">            jQuery .<span class="title function_">each</span>();</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 2.让jquery 释放对$ 控制权 让用自己决定</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">let</span> suibian = jQuery.<span class="title function_">noConflict</span>();</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">suibian</span>(<span class="string">&quot;span&quot;</span>));</span></span><br><span class="line"><span class="language-javascript">            suibian.<span class="title function_">each</span>()</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="jQuery插件"><a href="#jQuery插件" class="headerlink" title="jQuery插件"></a>jQuery插件</h2><p>jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成注意:这些插件也是依赖于jQuery来完成的，所以必须要先引入iQuery文件，因此也称为jQuery插件jQuery插件常用的网站:</p>
<ol>
<li>jQuery插件库 <a target="_blank" rel="noopener" href="http://wwwjq22.com/">http://wwwjq22.com/</a></li>
<li>iQuery之家<a target="_blank" rel="noopener" href="http://www.htmleaf.com/">http://www.htmleaf.com</a></li>
</ol>
<p>jQuery插件使用步骤:</p>
<ol>
<li><p>引入相关文件。(jQuery文件和插件文件)</p>
</li>
<li><p>复制相关html、css、js(调用插件)</p>
</li>
</ol>
<p>jQuery插件演示:</p>
<ol>
<li><p>瀑布流</p>
</li>
<li><p>图片懒加载(图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)当我们页面滑动到可视区域，再显示图片。<br>我们使用iquery插件库 EasyLazyload。注意，此时的js引入文件和js调用必须写到DOM元素(图片)最后面</p>
</li>
<li><p>全屏滚动（fullpage.js )<br>gitHub : <a target="_blank" rel="noopener" href="https://qithub.com/alvarotrigo/fullPage.js">https://qithub.com/alvarotrigo/fullPage.js</a><br>中文翻译网站: <a target="_blank" rel="noopener" href="http://www.dowebok.com/demo/2014/77/">http://www.dowebok.com/demo/2014/77/</a></p>
</li>
</ol>
<h2 id="本地存储"><a href="#本地存储" class="headerlink" title="本地存储"></a>本地存储</h2><p>刷新页面不会丢失数据，因此需要用到本地存储localStorage</p>
<p>核心思路:不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据</p>
<p>存储的数据格式:var todolist= [title:“xxx，done: false}]</p>
<p>注意点1: 本地存储localStorage里面只能存储字符串格式，因此需要把对象转换为字符串 <strong>JSON.stringify(data)</strong></p>
<p>注意点2: 获取本地存储数据，需要把里面的字符串转换为对象格式 <strong>JSON.parse()</strong> 我们才能使用里面的数据</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;jQuery.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        $(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">let</span> todolist = [&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">title</span>: <span class="string">&quot;我今天吃八个馒头&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">done</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="language-javascript">            &#125;, &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">title</span>: <span class="string">&quot;我今天学习jq&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">done</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="language-javascript">            &#125;,];</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 1.本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式JSON.stringify()</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&quot;todo&quot;</span>, <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(todolist));</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">var</span> data = <span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&quot;todo&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// console.log(typeof data) // string</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// console.log(data[0].title) // 报错，需要转换为对象先</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 获取本地存储的数据 我们需要把里面的字符串数据转换为 对象格式 JSON.parse()</span></span></span><br><span class="line"><span class="language-javascript">            data = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(data);</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(data) <span class="comment">// [&#123;title: &quot;我今天吃八个馒头&quot;,done: false&#125;, &#123; title: &quot;我今天学习jq&quot;,done: false&#125;,]</span></span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h1 id="十一、-AJAX"><a href="#十一、-AJAX" class="headerlink" title="十一、 AJAX"></a>十一、 AJAX</h1><h2 id="什么是ajax"><a href="#什么是ajax" class="headerlink" title="什么是ajax?"></a>什么是ajax?</h2><p>AJAX 是异步的 JavaScript 和 XML (Asynchronous JavaScript And XML) 。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。</p>
<p><strong>概念: AJAX是浏览器与服务器进行数据通信，实现动态数据交互的技术</strong></p>


<h2 id="ajax的使用"><a href="#ajax的使用" class="headerlink" title="ajax的使用"></a>ajax的使用</h2><ol>
<li><p>先使用 axios [eek’sious] 库，与服务器进行数据通信</p>
<p>基于 XMLHttpRequest 封装、代码简单、月下载量在14 亿次</p>
<p>Vue、React 项目中都会用到 axios</p>
</li>
<li><p>再学习 XMLHttpRequest 对象的使用，了解 AJAX 底层原理</p>
</li>
</ol>
<p>语法:</p>
<ol>
<li>引入 axios.js 库: <a target="_blank" rel="noopener" href="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js%EF%BC%88%E5%9C%A8%E7%BA%BF%E5%BA%93%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BB%A5%E4%B8%8B%E8%BD%BD%E5%BC%95%E7%94%A8%E6%9C%AC%E5%9C%B0%E7%9A%84%EF%BC%89">https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js（在线库，也可以下载引用本地的）</a></li>
<li>使用 axios 函数</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">axios</span>(&#123;</span><br><span class="line">    <span class="comment">// 传入配置对象</span></span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;目标资源地址&#x27;</span></span><br><span class="line">    <span class="comment">// 再用 .then 回调函数接收结果，并做后续处理</span></span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function">(<span class="params">result</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 对服务器返回的数据做后续处理</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>例：</p>
<p>请求目标资源地址，拿到省份列表数据。显示到页面目标资源地址: <a target="_blank" rel="noopener" href="http://hmajax.itheima.net/api/province">http://hmajax.itheima.net/api/province</a></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--    1. 引入 axios 库--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 2. 使用 axios 函数</span></span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">axios</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/province&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// console.log(result)</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.p&#x27;</span>).<span class="property">innerHTML</span> = result.<span class="property">data</span>.<span class="property">list</span>.<span class="title function_">join</span>(<span class="string">&#x27;&lt;br&gt;&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h3 id="url"><a href="#url" class="headerlink" title="url"></a>url</h3><p>定义：统一资源定位符(英语: Uniform Resource Locator，缩写: URL，或称统一资源定位器、定位地址、URL地址[1) 俗称网页地址，简称网址，是因特网上标准的资源的地址 (Address)，如同在网络上的门牌。它最初是由蒂姆·伯纳斯-李发明用来作为万维网的地址，现在它已经被万维网联盟编制为因特网标准RFC 1738。</p>
<p>例：<br><a target="_blank" rel="noopener" href="https://www.baidu.com/index.html">https://www.baidu.com/index.html</a> –&gt; 网页资源</p>
<p><a target="_blank" rel="noopener" href="https://www.itheima.com/images/logo.png">https://www.itheima.com/images/logo.png</a> –&gt; 图片资源</p>
<p><a target="_blank" rel="noopener" href="http://hmaiax.itheima.net/api/province">http://hmaiax.itheima.net/api/province</a> –&gt; 数据资源</p>
<p>概念：url就是统一资源定位符，简称网址，用于访问网络上的资源</p>


<p>协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式</p>
<p>域名：标记服务器在互联网中方位</p>
<p>资源路径：标记资源在服务器下的具体位置</p>
<h3 id="url-查询参数"><a href="#url-查询参数" class="headerlink" title="url 查询参数"></a>url 查询参数</h3><p>作用：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据</p>
<p>语法：<a target="_blank" rel="noopener" href="http://xxxx.com/xxx/xxx?%E5%8F%82%E6%95%B0%E5%90%8D1=%E5%80%BC1&amp;%E5%8F%82%E6%95%B0%E5%90%8D2=%E5%80%BC2">http://xxxx.com/xxx/xxx?参数名1=值1&amp;参数名2=值2</a></p>
<p>如何携带查询参数？使用 params 选项，携带参数名和值</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--    1. 引入 axios 库--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">axios</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/city&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">params</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">pname</span>: <span class="string">&#x27;福建省&#x27;</span></span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// console.log(result)</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.p&#x27;</span>).<span class="property">innerHTML</span> = result.<span class="property">data</span>.<span class="property">list</span>.<span class="title function_">join</span>(<span class="string">&#x27;&lt;br&gt;&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>网络请求时接口访问地址：<a target="_blank" rel="noopener" href="http://hmajax.itheima.net/api/city?pname=%E7%A6%8F%E5%BB%BA%E7%9C%81">http://hmajax.itheima.net/api/city?pname=%E7%A6%8F%E5%BB%BA%E7%9C%81</a></p>


<h2 id="axios-请求配置"><a href="#axios-请求配置" class="headerlink" title="axios 请求配置"></a>axios 请求配置</h2><p><strong>axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送 get、post 等请求。</strong></p>
<p>请求方法：对服务器资源，要执行的操作，常用的请求方法如下：</p>


<p><strong>axios 请求配置</strong></p>
<p>url：请求的URL网址</p>
<p>method：请求的方法，GET可以省略 (不区分大小写)</p>
<p>data：提交数据</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">axios</span>(&#123;</span><br><span class="line">	<span class="attr">url</span>: <span class="string">&#x27;目标资源地址&#x27;</span>,</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;请求方法&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        参数名:值</span><br><span class="line">    &#125;</span><br><span class="line">]).<span class="title function_">then</span>(<span class="function">(<span class="params">result</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 对服务器返回的数据做后续处理</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>例：点击按钮，通过axios提交用户和密码，完成注册</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;btn&quot;</span>&gt;</span>注册用户<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.btn&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="title function_">axios</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/register&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">method</span>: <span class="string">&#x27;POST&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="attr">username</span>: <span class="string">&#x27;itheima007&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">          <span class="attr">password</span>: <span class="string">&#x27;7654321&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">      &#125;)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="axios-错误处理"><a href="#axios-错误处理" class="headerlink" title="axios 错误处理"></a>axios 错误处理</h2>

<p>语法：在 then 方法的后面，通过点语法调用 catch 方法，传入 回调函数 并定义 形参</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">axios</span>(&#123;</span><br><span class="line">	<span class="comment">// 请求选项</span></span><br><span class="line">]).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 处理数据</span></span><br><span class="line">&#125;).<span class="title function_">catch</span>(<span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 处理错误</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>例：注册案例，重复注册时通过弹框提示用户错误信息</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;btn&quot;</span>&gt;</span>注册用户<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/*</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">      需求: 使用axios错误处理语法, 拿到报错信息, 弹框反馈给用户</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    */</span></span></span><br><span class="line"><span class="language-javascript">   <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.btn&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">axios</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/register&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">username</span>: <span class="string">&#x27;itheima007&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">password</span>: <span class="string">&#x27;7654321&#x27;</span></span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 成功</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(result)</span></span><br><span class="line"><span class="language-javascript">    &#125;).<span class="title function_">catch</span>(<span class="function"><span class="params">error</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 失败</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 处理错误信息</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(error)</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(error.<span class="property">response</span>.<span class="property">data</span>.<span class="property">message</span>)</span></span><br><span class="line"><span class="language-javascript">      <span class="title function_">alert</span>(error.<span class="property">response</span>.<span class="property">data</span>.<span class="property">message</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">   &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="HTTP-协议"><a href="#HTTP-协议" class="headerlink" title="HTTP 协议"></a>HTTP 协议</h2><h3 id="请求报文"><a href="#请求报文" class="headerlink" title="请求报文"></a>请求报文</h3><p>HTTP 协议：规定了浏览器发送及服务器返回内容的格式</p>
<p>请求报文：浏览器按照 HTTP 协议要求的格式，发送给服务器的内容（可以在控制台的网络面板查看报文）</p>


<h3 id="响应报文"><a href="#响应报文" class="headerlink" title="响应报文"></a>响应报文</h3>

<p>响应状态码：用来表明请求是否成功完成</p>
<p>1xx：信息、2xx：成功、3xx：重定向消息、4xx：客户端错误、5xx：服务器错误</p>


<h2 id="接口文档"><a href="#接口文档" class="headerlink" title="接口文档"></a>接口文档</h2><p>接口文档：由后端提供的描述接口的文章</p>
<p>接口：使用 AJAX 和服务器通讯时，使用的 <strong>URL，请求方法，以及参数</strong></p>


<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;btn&quot;</span>&gt;</span>注册用户<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">   <span class="comment">/* 根据接口文档来写网络请求 */</span></span></span><br><span class="line"><span class="language-javascript">   <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.btn&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">axios</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/login&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">username</span>: <span class="string">&#x27;itheima007&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">password</span>: <span class="string">&#x27;7654321&#x27;</span></span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="快速搜集表单元素"><a href="#快速搜集表单元素" class="headerlink" title="快速搜集表单元素"></a>快速搜集表单元素</h2><p>使用 form-serialize 插件，快速收集表单元素值，解决多个表单下，要挨个去获取的麻烦。</p>
<ol>
<li>把插件引入到自己网页中</li>
<li>使用 <strong>serialize(数据，{获取数据结构，获取空值})</strong> 函数</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;javascript:;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;example-form&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;username&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;password&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">class</span>=<span class="string">&quot;btn&quot;</span> <span class="attr">value</span>=<span class="string">&quot;提交&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">    目标：在点击提交时，使用form-serialize插件，快速收集表单元素值</span></span><br><span class="line"><span class="comment">  --&gt;</span></span><br><span class="line">  &lt;--! 1. 把插件引入到自己网页中 --&gt;</span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./lib/form-serialize.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.btn&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">       * 2. 使用serialize函数，快速收集表单元素的值</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">       * 参数1：要获取哪个表单的数据</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">       *  表单元素设置name属性，值会作为对象的属性名</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">       *  建议name属性的值，最好和接口文档参数名一致</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">       * 参数2：配置对象</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">       *  hash 设置获取数据结构</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">       *    - true：JS对象（推荐）一般请求体里提交给服务器</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">       *    - false: 查询字符串</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">       *  empty 设置是否获取空值</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">       *    - true: 获取空值（推荐）数据结构和标签结构一致</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">       *    - false：不获取空值</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">      */</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> form = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.example-form&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> data = <span class="title function_">serialize</span>(form, &#123; <span class="attr">hash</span>: <span class="literal">true</span>, <span class="attr">empty</span>: <span class="literal">true</span> &#125;) <span class="comment">//&#123;username:&#x27;itheima007&#x27;,password:&#x27;7654321&#x27;&#125;</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// const data = serialize(form, &#123; hash: false, empty: true &#125;) username=itheima007&amp;password=7654321</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// const data = serialize(form, &#123; hash: true, empty: false &#125;)</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="图书管理案例"><a href="#图书管理案例" class="headerlink" title="图书管理案例"></a>图书管理案例</h2>









<h2 id="图片上传"><a href="#图片上传" class="headerlink" title="图片上传"></a>图片上传</h2>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 文件选择元素 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;file&quot;</span> <span class="attr">class</span>=<span class="string">&quot;upload&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;my-img&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 目标：图片上传，显示到网页上</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  1. 获取图片文件</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  2. 使用 FormData 携带图片文件</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  3. 提交到服务器，获取图片url网址使用</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    */</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 文件选择元素-&gt;change改变事件</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.upload&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;change&#x27;</span>, <span class="function"><span class="params">e</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 1. 获取图片文件</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(e.<span class="property">target</span>.<span class="property">files</span>[<span class="number">0</span>])</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 2. 使用 FormData 携带图片文件</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> fd = <span class="keyword">new</span> <span class="title class_">FormData</span>()</span></span><br><span class="line"><span class="language-javascript">      fd.<span class="title function_">append</span>(<span class="string">&#x27;img&#x27;</span>, e.<span class="property">target</span>.<span class="property">files</span>[<span class="number">0</span>])</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 3. 提交到服务器，获取图片url网址使用</span></span></span><br><span class="line"><span class="language-javascript">      <span class="title function_">axios</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/uploadimg&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">method</span>: <span class="string">&#x27;POST&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: fd</span></span><br><span class="line"><span class="language-javascript">      &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(result)</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 取出图片url网址，用img标签加载显示</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> imgUrl = result.<span class="property">data</span>.<span class="property">data</span>.<span class="property">url</span></span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.my-img&#x27;</span>).<span class="property">src</span> = imgUrl</span></span><br><span class="line"><span class="language-javascript">      &#125;)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="AJAX原理-XMLHttpRequest"><a href="#AJAX原理-XMLHttpRequest" class="headerlink" title="AJAX原理 - XMLHttpRequest"></a>AJAX原理 - XMLHttpRequest</h2><p>定义：MLHttpRequest (XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。 XMLHttpRequest 在AJAX 编程中被大量使用。</p>
<p>关系：axios 内部采用 XMLHttpRequest 与服务器交互</p>
<p>好处：掌握使用XHR与服务器进行数据交互，有更多与服务器数据通信方式，了解 axios 内部原理</p>
<p>使用：轻量化，就用 XHR，不需要轻量化就用 axios</p>
<p>步骤：</p>
<ol>
<li>创建 XMLHttpRequest 对象</li>
<li>配置请求方法和请求url地址</li>
<li>监听 loadend 事件，接收响应结果</li>
<li>发起请求</li>
</ol>


<p>例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">open</span>(<span class="string">&#x27;GET&#x27;</span>, <span class="string">&#x27;http://hmajax.itheima.net/api/province&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">addEventListener</span>(<span class="string">&#x27;loadend&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// console.log(xhr.response)</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">const</span> data = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(xhr.<span class="property">response</span>)</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.p&#x27;</span>).<span class="property">innerHTML</span> = data.<span class="property">list</span>.<span class="title function_">join</span>(<span class="string">&#x27;&lt;br&gt;&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">send</span>()</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h3 id="数据查询-查询参数"><a href="#数据查询-查询参数" class="headerlink" title="数据查询 - 查询参数"></a>数据查询 - 查询参数</h3><p>定义：浏览器提供给服务器的<strong>额外信息</strong>，让服务器返回浏览器想要的数据</p>
<p>语法：<a target="_blank" rel="noopener" href="http://xxxx.com/xxx/xxx?%E5%8F%82%E6%95%B0%E5%90%8D1=%E5%80%BC1&amp;%E5%8F%82%E6%95%B0%E5%90%8D2=%E5%80%BC2">http://xxxx.com/xxx/xxx?参数名1=值1&amp;参数名2=值2</a></p>


<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">open</span>(<span class="string">&#x27;GET&#x27;</span>, <span class="string">&#x27;http://hmajax.itheima.net/api/city?pname=辽宁省&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">addEventListener</span>(<span class="string">&#x27;loadend&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// console.log(xhr.response)</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">const</span> data = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(xhr.<span class="property">response</span>)</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.p&#x27;</span>).<span class="property">innerHTML</span> = data.<span class="property">list</span>.<span class="title function_">join</span>(<span class="string">&#x27;&lt;br&gt;&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">send</span>()</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h3 id="拼接多个查询参数"><a href="#拼接多个查询参数" class="headerlink" title="拼接多个查询参数"></a>拼接多个查询参数</h3><p>像上面一般一个参数的话直接写在open里没什么大问题，但如果传参过多则不易书写，此时可以借助 URLSearchParams 这个 api</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 创建 URLSearchParams 对象</span></span><br><span class="line"><span class="keyword">const</span> paramsObj = <span class="keyword">new</span> <span class="title class_">URLSearchParams</span>(&#123;</span><br><span class="line">    参数名<span class="number">1</span>: 值<span class="number">1</span>,</span><br><span class="line">    参数名<span class="number">2</span>: 值<span class="number">2</span>,</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 2. 生成指定格式查询参数 字符串</span></span><br><span class="line"><span class="keyword">const</span> queryString = paramsObj.<span class="title function_">toString</span>()</span><br><span class="line"><span class="comment">// 结果：参数名1=值1&amp;参数名2=值2</span></span><br></pre></td></tr></table></figure>

<p>例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> qObj = &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">pname</span>: <span class="string">&#x27;辽宁省&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">cname</span>: <span class="string">&#x27;大连市&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 1. 创建 URLSearchParams 对象</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> paramsObj = <span class="keyword">new</span> <span class="title class_">URLSearchParams</span>(qObj)</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 2. 生成指定格式查询参数 字符串</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> queryString = paramsObj.<span class="title function_">toString</span>()</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 结果：参数名1=值1&amp;参数名2=值2</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">open</span>(<span class="string">&#x27;GET&#x27;</span>, <span class="string">`http://hmajax.itheima.net/api/area?<span class="subst">$&#123;queryString&#125;</span>`</span>)</span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">addEventListener</span>(<span class="string">&#x27;loadend&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// console.log(xhr.response)</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">const</span> data = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(xhr.<span class="property">response</span>)</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.p&#x27;</span>).<span class="property">innerHTML</span> = data.<span class="property">list</span>.<span class="title function_">join</span>(<span class="string">&#x27;&lt;br&gt;&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">send</span>()</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>





<p>注意！因为规定 url 中只能出现英文、数字、以及一些特殊符号，不能出现中文，所以在于服务器沟通的过程中传递的网址会被浏览器进行 <strong>url 编码</strong>，服务器那边拿到网址则会进行 <strong>url 解码</strong>，拿到对应的中文</p>
<h3 id="数据提交"><a href="#数据提交" class="headerlink" title="数据提交"></a>数据提交</h3>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;reg-btn&quot;</span>&gt;</span>注册用户<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/* 目标：使用xhr进行数据提交-完成注册功能 */</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.reg-btn&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span></span><br><span class="line"><span class="language-javascript">      xhr.<span class="title function_">open</span>(<span class="string">&#x27;POST&#x27;</span>, <span class="string">&#x27;http://hmajax.itheima.net/api/register&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">      xhr.<span class="title function_">addEventListener</span>(<span class="string">&#x27;loadend&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(xhr.<span class="property">response</span>)</span></span><br><span class="line"><span class="language-javascript">      &#125;)</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 设置请求头-告诉服务器内容类型（JSON字符串）</span></span></span><br><span class="line"><span class="language-javascript">      xhr.<span class="title function_">setRequestHeader</span>(<span class="string">&#x27;Content-Type&#x27;</span>, <span class="string">&#x27;application/json&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 准备提交的数据</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> userObj = &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">username</span>: <span class="string">&#x27;itheima007&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">password</span>: <span class="string">&#x27;7654321&#x27;</span></span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> userStr = <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(userObj)</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 设置请求体，发起请求</span></span></span><br><span class="line"><span class="language-javascript">      xhr.<span class="title function_">send</span>(userStr)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h2><p>Promise 对象用于表示一个异步操作的最终完成(或失败)及其结果值</p>
<p>好处：1.逻辑更清晰 2. 了解 axios 函数内部运作机制 3. 能解决回调函数地狱问题</p>


<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 目标：认识Promise状态</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    */</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 创建Promise对象（pending-待定状态）</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// Promise对象创建时，这里的代码都会执行了</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 2. 执行异步代码</span></span></span><br><span class="line"><span class="language-javascript">      <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// resolve() =&gt; &#x27;fulfilled状态-已兑现&#x27; =&gt; then()</span></span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">resolve</span>(<span class="string">&#x27;模拟AJAX请求-成功结果&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// reject() =&gt; &#x27;rejected状态-已拒绝&#x27; =&gt; catch()</span></span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">reject</span>(<span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;模拟AJAX请求-失败结果&#x27;</span>))</span></span><br><span class="line"><span class="language-javascript">      &#125;, <span class="number">2000</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(p)</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 3. 获取结果</span></span></span><br><span class="line"><span class="language-javascript">    p.<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(result)</span></span><br><span class="line"><span class="language-javascript">    &#125;).<span class="title function_">catch</span>(<span class="function"><span class="params">error</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(error)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="Promise-XHR"><a href="#Promise-XHR" class="headerlink" title="Promise + XHR"></a>Promise + XHR</h2><p>用一个获取省份列表的案例，将 promise + AJAX原理（XMLHttpRequest） 这两种融合在一起</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;my-p&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 目标：使用Promise管理XHR请求省份列表</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  1. 创建Promise对象</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  2. 执行XHR异步代码，获取省份列表</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  3. 关联成功或失败函数，做后续处理</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    */</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 创建Promise对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 2. 执行XHR异步代码，获取省份列表</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span></span><br><span class="line"><span class="language-javascript">      xhr.<span class="title function_">open</span>(<span class="string">&#x27;GET&#x27;</span>, <span class="string">&#x27;http://hmajax.itheima.net/api/province&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">      xhr.<span class="title function_">addEventListener</span>(<span class="string">&#x27;loadend&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// xhr如何判断响应成功还是失败的？</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 2xx开头的都是成功响应状态码</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">if</span> (xhr.<span class="property">status</span> &gt;= <span class="number">200</span> &amp;&amp; xhr.<span class="property">status</span> &lt; <span class="number">300</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="title function_">resolve</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(xhr.<span class="property">response</span>))</span></span><br><span class="line"><span class="language-javascript">        &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="title function_">reject</span>(<span class="keyword">new</span> <span class="title class_">Error</span>(xhr.<span class="property">response</span>))</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">      &#125;)</span></span><br><span class="line"><span class="language-javascript">      xhr.<span class="title function_">send</span>()</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 3. 关联成功或失败函数，做后续处理</span></span></span><br><span class="line"><span class="language-javascript">    p.<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(result)</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.my-p&#x27;</span>).<span class="property">innerHTML</span> = result.<span class="property">list</span>.<span class="title function_">join</span>(<span class="string">&#x27;&lt;br&gt;&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;).<span class="title function_">catch</span>(<span class="function"><span class="params">error</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 错误对象要用console.dir详细打印</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">dir</span>(error)</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 服务器返回错误提示消息，插入到p标签显示</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.my-p&#x27;</span>).<span class="property">innerHTML</span> = error.<span class="property">message</span></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="封装-axios"><a href="#封装-axios" class="headerlink" title="封装 axios"></a>封装 axios</h2><h3 id="get-查询数据"><a href="#get-查询数据" class="headerlink" title="get 查询数据"></a>get 查询数据</h3><h4 id="无参查询"><a href="#无参查询" class="headerlink" title="无参查询"></a>无参查询</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;my-p&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 目标：封装_简易axios函数_获取省份列表</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  1. 定义myAxios函数，接收配置对象，返回Promise对象</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  2. 发起XHR请求，默认请求方法为GET</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  3. 调用成功/失败的处理程序</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  4. 使用myAxios函数，获取省份列表展示</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    */</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 定义myAxios函数，接收配置对象，返回Promise对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">myAxios</span>(<span class="params">config</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 2. 发起XHR请求，默认请求方法为GET</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">open</span>(config.<span class="property">method</span> || <span class="string">&#x27;GET&#x27;</span>, config.<span class="property">url</span>)</span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">addEventListener</span>(<span class="string">&#x27;loadend&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="comment">// 3. 调用成功/失败的处理程序</span></span></span><br><span class="line"><span class="language-javascript">          <span class="keyword">if</span> (xhr.<span class="property">status</span> &gt;= <span class="number">200</span> &amp;&amp; xhr.<span class="property">status</span> &lt; <span class="number">300</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">resolve</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(xhr.<span class="property">response</span>))</span></span><br><span class="line"><span class="language-javascript">          &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">reject</span>(<span class="keyword">new</span> <span class="title class_">Error</span>(xhr.<span class="property">response</span>))</span></span><br><span class="line"><span class="language-javascript">          &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">send</span>()</span></span><br><span class="line"><span class="language-javascript">      &#125;)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 4. 使用myAxios函数，获取省份列表展示</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">myAxios</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/province&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(result)</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.my-p&#x27;</span>).<span class="property">innerHTML</span> = result.<span class="property">list</span>.<span class="title function_">join</span>(<span class="string">&#x27;&lt;br&gt;&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;).<span class="title function_">catch</span>(<span class="function"><span class="params">error</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(error)</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.my-p&#x27;</span>).<span class="property">innerHTML</span> = error.<span class="property">message</span></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="多参查询"><a href="#多参查询" class="headerlink" title="多参查询"></a>多参查询</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;my-p&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 目标：封装_简易axios函数_获取地区列表</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  1. 判断有params选项，携带查询参数</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  2. 使用URLSearchParams转换，并携带到url上</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  3. 使用myAxios函数，获取地区列表</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    */</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">myAxios</span>(<span class="params">config</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 1. 判断有params选项，携带查询参数</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">if</span> (config.<span class="property">params</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="comment">// 2. 使用URLSearchParams转换，并携带到url上</span></span></span><br><span class="line"><span class="language-javascript">          <span class="keyword">const</span> paramsObj = <span class="keyword">new</span> <span class="title class_">URLSearchParams</span>(config.<span class="property">params</span>)</span></span><br><span class="line"><span class="language-javascript">          <span class="keyword">const</span> queryString = paramsObj.<span class="title function_">toString</span>()</span></span><br><span class="line"><span class="language-javascript">          <span class="comment">// 把查询参数字符串，拼接在url？后面</span></span></span><br><span class="line"><span class="language-javascript">          config.<span class="property">url</span> += <span class="string">`?<span class="subst">$&#123;queryString&#125;</span>`</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">open</span>(config.<span class="property">method</span> || <span class="string">&#x27;GET&#x27;</span>, config.<span class="property">url</span>)</span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">addEventListener</span>(<span class="string">&#x27;loadend&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="keyword">if</span> (xhr.<span class="property">status</span> &gt;= <span class="number">200</span> &amp;&amp; xhr.<span class="property">status</span> &lt; <span class="number">300</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">resolve</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(xhr.<span class="property">response</span>))</span></span><br><span class="line"><span class="language-javascript">          &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">reject</span>(<span class="keyword">new</span> <span class="title class_">Error</span>(xhr.<span class="property">response</span>))</span></span><br><span class="line"><span class="language-javascript">          &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">send</span>()</span></span><br><span class="line"><span class="language-javascript">      &#125;)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 3. 使用myAxios函数，获取地区列表</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">myAxios</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/area&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">params</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">pname</span>: <span class="string">&#x27;辽宁省&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">cname</span>: <span class="string">&#x27;大连市&#x27;</span></span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(result)</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.my-p&#x27;</span>).<span class="property">innerHTML</span> = result.<span class="property">list</span>.<span class="title function_">join</span>(<span class="string">&#x27;&lt;br&gt;&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="post-请求数据-多参"><a href="#post-请求数据-多参" class="headerlink" title="post 请求数据(多参)"></a>post 请求数据(多参)</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;reg-btn&quot;</span>&gt;</span>注册用户<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 目标：封装_简易axios函数_注册用户</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  1. 判断有data选项，携带请求体</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  2. 转换数据类型，在send中发送</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  3. 使用myAxios函数，完成注册用户</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    */</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">myAxios</span>(<span class="params">config</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">if</span> (config.<span class="property">params</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="keyword">const</span> paramsObj = <span class="keyword">new</span> <span class="title class_">URLSearchParams</span>(config.<span class="property">params</span>)</span></span><br><span class="line"><span class="language-javascript">          <span class="keyword">const</span> queryString = paramsObj.<span class="title function_">toString</span>()</span></span><br><span class="line"><span class="language-javascript">          config.<span class="property">url</span> += <span class="string">`?<span class="subst">$&#123;queryString&#125;</span>`</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">open</span>(config.<span class="property">method</span> || <span class="string">&#x27;GET&#x27;</span>, config.<span class="property">url</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        xhr.<span class="title function_">addEventListener</span>(<span class="string">&#x27;loadend&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="keyword">if</span> (xhr.<span class="property">status</span> &gt;= <span class="number">200</span> &amp;&amp; xhr.<span class="property">status</span> &lt; <span class="number">300</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">resolve</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(xhr.<span class="property">response</span>))</span></span><br><span class="line"><span class="language-javascript">          &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">reject</span>(<span class="keyword">new</span> <span class="title class_">Error</span>(xhr.<span class="property">response</span>))</span></span><br><span class="line"><span class="language-javascript">          &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 1. 判断有data选项，携带请求体</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">if</span> (config.<span class="property">data</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="comment">// 2. 转换数据类型，在send中发送</span></span></span><br><span class="line"><span class="language-javascript">          <span class="keyword">const</span> jsonStr = <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(config.<span class="property">data</span>)</span></span><br><span class="line"><span class="language-javascript">          xhr.<span class="title function_">setRequestHeader</span>(<span class="string">&#x27;Content-Type&#x27;</span>, <span class="string">&#x27;application/json&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">          xhr.<span class="title function_">send</span>(jsonStr)</span></span><br><span class="line"><span class="language-javascript">        &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="comment">// 如果没有请求体数据，正常的发起请求</span></span></span><br><span class="line"><span class="language-javascript">          xhr.<span class="title function_">send</span>()</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">      &#125;)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">  </span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.reg-btn&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 3. 使用myAxios函数，完成注册用户</span></span></span><br><span class="line"><span class="language-javascript">      <span class="title function_">myAxios</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/register&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">method</span>: <span class="string">&#x27;POST&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="attr">username</span>: <span class="string">&#x27;itheima999&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">          <span class="attr">password</span>: <span class="string">&#x27;666666&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">      &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(result)</span></span><br><span class="line"><span class="language-javascript">      &#125;).<span class="title function_">catch</span>(<span class="function"><span class="params">error</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">dir</span>(error)</span></span><br><span class="line"><span class="language-javascript">      &#125;)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="同步代码和异步代码"><a href="#同步代码和异步代码" class="headerlink" title="同步代码和异步代码"></a>同步代码和异步代码</h2><p>同步代码：我们应该注意的是，实际上浏览器是按照我们书写代码的顺序一行一行地执行程序的。浏览器会等待代码的解析和工作，在上一行完成后才会执行下一行。这样做是很有必要的，因为每一行新的代码都是建立在前面代码的基础之上的。这也使得它成为一个同步程序；<br>异步代码：异步编程技术使你的程序可以在执行一个可能长期运行的任务的同时继续对其他事件做出反应而不必等待任务完成。与此同时，你的程序也将在任务完成后显示结果；</p>
<p>同步代码：逐行执行，需<strong>原地等待结果</strong>后，才继续向下执行；</p>
<p>异步代码：调用后<strong>耗时</strong>，不阻塞代码继续执行(不必原地等待)，在将来完成后触发一个回调函数（<strong>异步代码依靠回调函数来接收结果</strong>）</p>
<p>js中有哪些异步代码？setTimeout、setInterval、时间、AJAX</p>


<h2 id="回调函数地狱"><a href="#回调函数地狱" class="headerlink" title="回调函数地狱"></a>回调函数地狱</h2>

<h2 id="Promise-链式调用"><a href="#Promise-链式调用" class="headerlink" title="Promise - 链式调用"></a>Promise - 链式调用</h2><p>概念：使用 then 函数返回新 Promise 对象特性，一直串联下去，直到结束</p>
<p>细节：then 回调函数中，return 返回值会传给 then 函数生成的新 Promise 对象</p>
<p>好处：通过链式调用，解决回调函数嵌套问题</p>


<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 目标：掌握Promise的链式调用</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 需求：把省市的嵌套结构，改成链式调用的线性结构</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    */</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 创建Promise对象-模拟请求省份名字</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">resolve</span>(<span class="string">&#x27;北京市&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">      &#125;, <span class="number">2000</span>)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 获取省份名字</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> p2 = p.<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(result) <span class="comment">// 北京</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 3. 创建Promise对象-模拟请求城市名字</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// return Promise对象最终状态和结果，影响到新的Promise对象</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="title function_">resolve</span>(result)</span></span><br><span class="line"><span class="language-javascript">        &#125;, <span class="number">2000</span>)</span></span><br><span class="line"><span class="language-javascript">      &#125;)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 4. 获取城市名字</span></span></span><br><span class="line"><span class="language-javascript">    p2.<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(result) <span class="comment">// 北京（上面return返回值在这里 then 生成新 Promise 对象）</span></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// then()原地的结果是一个新的Promise对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(p2 === p) <span class="comment">// false</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>例：把上面的获取省市区回调地狱改成 Promise 链式调用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>省份：<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">select</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">option</span> <span class="attr">class</span>=<span class="string">&quot;province&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>城市：<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">select</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">option</span> <span class="attr">class</span>=<span class="string">&quot;city&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>地区：<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">select</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">option</span> <span class="attr">class</span>=<span class="string">&quot;area&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 目标：把回调函数嵌套代码，改成Promise链式调用结构</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    */</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> pname = <span class="string">&#x27;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 得到-获取省份Promise对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">axios</span>(&#123;<span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/province&#x27;</span>&#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      pname = result.<span class="property">data</span>.<span class="property">list</span>[<span class="number">0</span>]</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.province&#x27;</span>).<span class="property">innerHTML</span> = pname</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 2. 得到-获取城市Promise对象</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">return</span> <span class="title function_">axios</span>(&#123;<span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/city&#x27;</span>, <span class="attr">params</span>: &#123; pname &#125;&#125;)</span></span><br><span class="line"><span class="language-javascript">    &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> cname = result.<span class="property">data</span>.<span class="property">list</span>[<span class="number">0</span>]</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.city&#x27;</span>).<span class="property">innerHTML</span> = cname</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 3. 得到-获取地区Promise对象</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">return</span> <span class="title function_">axios</span>(&#123;<span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/area&#x27;</span>, <span class="attr">params</span>: &#123; pname, cname &#125;&#125;)</span></span><br><span class="line"><span class="language-javascript">    &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(result)</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> areaName = result.<span class="property">data</span>.<span class="property">list</span>[<span class="number">0</span>]</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.area&#x27;</span>).<span class="property">innerHTML</span> = areaName</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="async-和-await"><a href="#async-和-await" class="headerlink" title="async 和 await"></a>async 和 await</h2><p>定义：async 函数是使用 async 关键字声明的函数。async 函数是 AsyncFunction 构造函数的实例，并且其中允许使用 await 关键字。async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为，而无需刻意地链式调用 promise。</p>
<p>概念：在 async 函数内，使用 await 关键字取代 then 函数，<strong>等待</strong>获取 Promise 对象<strong>成功状态的结果值</strong></p>


<h3 id="错误捕获"><a href="#错误捕获" class="headerlink" title="错误捕获"></a>错误捕获</h3><p>try…catch 语句标记要尝试的语句块，并指定一个出现异常时抛出的响应</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="comment">/* 目标：async和await_错误捕获 */</span></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">getData</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. try包裹可能产生错误的代码</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">try</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> pObj = <span class="keyword">await</span> <span class="title function_">axios</span>(&#123; <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/province&#x27;</span> &#125;)</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> pname = pObj.<span class="property">data</span>.<span class="property">list</span>[<span class="number">0</span>]</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> cObj = <span class="keyword">await</span> <span class="title function_">axios</span>(&#123; <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/city&#x27;</span>, <span class="attr">params</span>: &#123; pname &#125; &#125;)</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> cname = cObj.<span class="property">data</span>.<span class="property">list</span>[<span class="number">0</span>]</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> aObj = <span class="keyword">await</span> <span class="title function_">axios</span>(&#123; <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/area&#x27;</span>, <span class="attr">params</span>: &#123; pname, cname &#125; &#125;)</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> areaName = aObj.<span class="property">data</span>.<span class="property">list</span>[<span class="number">0</span>]</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.province&#x27;</span>).<span class="property">innerHTML</span> = pname</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.city&#x27;</span>).<span class="property">innerHTML</span> = cname</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.area&#x27;</span>).<span class="property">innerHTML</span> = areaName</span></span><br><span class="line"><span class="language-javascript">    &#125; <span class="keyword">catch</span> (error) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 2. 接着调用catch块，接收错误信息</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 如果try里某行代码报错后，try中剩余的代码不会执行了</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">dir</span>(error)</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">getData</span>()</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="事件循环"><a href="#事件循环" class="headerlink" title="事件循环"></a>事件循环</h2><p>概念：JavaScript 有一个基于<strong>事件循环</strong>的并发模型，事件循环负责执行代码、收集和处理事件以及执行队列中的子<br>任务。这个模型与其它语言中的模型截然不同，比如 C 和 Java。</p>
<p>事件循环：执行代码和收集异步任务，在调用栈空闲时，反复调用任务队列里回调函数执行机制</p>
<p>原因：JavaScript 单线程(某一刻只能执行一行代码)，为了让耗时代码不阻塞其他代码运行，设计了事件循环模型</p>
<p>JS内代码如何执行：</p>
<ul>
<li>执行同步代码，遇到<strong>异步代码</strong>交给<strong>宿主</strong>浏览器环境执行</li>
<li>异步有了结果后，把回调函数放入<strong>任务队列排队</strong></li>
<li>当调用栈<strong>空闲</strong>后，反复调用任务队列里的回调函数</li>
</ul>


<h2 id="宏任务与微任务"><a href="#宏任务与微任务" class="headerlink" title="宏任务与微任务"></a>宏任务与微任务</h2><p>ES6之后引入了Promise 对象，让 JS 引擎也可以发起异步任务<br>异步任务分为：<br>宏任务: 由浏览器环境执行的异步代码        微任务：由 JS 引擎环境执行的异步代码</p>


<p>JS 内代码如何执行？</p>
<p>执行第一个 script 脚本事件宏任务，里面同步代码；遇到 宏任务/微任务 交给宿主环境，有结果回调函数进入对应队列</p>






<h2 id="Promise-all-静态方法"><a href="#Promise-all-静态方法" class="headerlink" title="Promise.all 静态方法"></a>Promise.all 静态方法</h2><p>概念：合并多个 Promise 对象，等待所有同时成功完成(或某一个失败)，做后续逻辑</p>


<p>例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;my-ul&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 目标：掌握Promise的all方法作用，和使用场景</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 业务：当我需要同一时间显示多个请求的结果时，就要把多请求合并</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 例如：默认显示&quot;北京&quot;, &quot;上海&quot;, &quot;广州&quot;, &quot;深圳&quot;的天气在首页查看</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * code：</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 北京-110100</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 上海-310100</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 广州-440100</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 深圳-440300</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    */</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1. 请求城市天气，得到Promise对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> bjPromise = <span class="title function_">axios</span>(&#123; <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/weather&#x27;</span>, <span class="attr">params</span>: &#123; <span class="attr">city</span>: <span class="string">&#x27;110100&#x27;</span> &#125; &#125;)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> shPromise = <span class="title function_">axios</span>(&#123; <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/weather&#x27;</span>, <span class="attr">params</span>: &#123; <span class="attr">city</span>: <span class="string">&#x27;310100&#x27;</span> &#125; &#125;)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> gzPromise = <span class="title function_">axios</span>(&#123; <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/weather&#x27;</span>, <span class="attr">params</span>: &#123; <span class="attr">city</span>: <span class="string">&#x27;440100&#x27;</span> &#125; &#125;)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> szPromise = <span class="title function_">axios</span>(&#123; <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/weather&#x27;</span>, <span class="attr">params</span>: &#123; <span class="attr">city</span>: <span class="string">&#x27;440300&#x27;</span> &#125; &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 使用Promise.all，合并多个Promise对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> p = <span class="title class_">Promise</span>.<span class="title function_">all</span>([bjPromise, shPromise, gzPromise, szPromise])</span></span><br><span class="line"><span class="language-javascript">    p.<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 注意：结果数组顺序和合并时顺序是一致</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(result)</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> htmlStr = result.<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">return</span> <span class="string">`&lt;li&gt;<span class="subst">$&#123;item.data.data.area&#125;</span> --- <span class="subst">$&#123;item.data.data.weather&#125;</span>&lt;/li&gt;`</span></span></span><br><span class="line"><span class="language-javascript">      &#125;).<span class="title function_">join</span>(<span class="string">&#x27;&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.my-ul&#x27;</span>).<span class="property">innerHTML</span> = htmlStr</span></span><br><span class="line"><span class="language-javascript">    &#125;).<span class="title function_">catch</span>(<span class="function"><span class="params">error</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">dir</span>(error)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>























</div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/coderwjh.gitee.io/img/tx02.jpg" onerror="this.onerror=null;this.src='/coderwjh.gitee.io/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">JiaHong Wu</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/coderwjh.gitee.io/archives/"><div class="headline">文章</div><div class="length-num">2</div></a><a href="/coderwjh.gitee.io/tags/"><div class="headline">标签</div><div class="length-num">0</div></a><a href="/coderwjh.gitee.io/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://gitee.com/coderwjh/coderwjh.gitee.io"><i class="fab fa-github"></i><span>主题 Gitee</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/coderwjh.gitee.io/2022/09/12/Gitee%20+%20Hexo%20%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" title="Gitee + Hexo 搭建个人博客"><img src="" onerror="this.onerror=null;this.src='/coderwjh.gitee.io/img/404.jpg'" alt="Gitee + Hexo 搭建个人博客"/></a><div class="content"><a class="title" href="/coderwjh.gitee.io/2022/09/12/Gitee%20+%20Hexo%20%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" title="Gitee + Hexo 搭建个人博客">Gitee + Hexo 搭建个人博客</a><time datetime="2022-09-12T02:35:29.000Z" title="发表于 2022-09-12 10:35:29">2022-09-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/coderwjh.gitee.io/2022/09/12/hello-world/" title="Hello World"><img src="" onerror="this.onerror=null;this.src='/coderwjh.gitee.io/img/404.jpg'" alt="Hello World"/></a><div class="content"><a class="title" href="/coderwjh.gitee.io/2022/09/12/hello-world/" title="Hello World">Hello World</a><time datetime="2022-09-12T00:56:24.063Z" title="发表于 2022-09-12 08:56:24">2022-09-12</time></div></div></div></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">2</div></div><div class="webinfo-item"><div class="item-name">已运行时间 :</div><div class="item-count" id="runtimeshow" data-publishDate="2022-09-08T04:00:00.000Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">3.1k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2023-08-11T09:40:26.527Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By JiaHong Wu</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/coderwjh.gitee.io/js/utils.js"></script><script src="/coderwjh.gitee.io/js/main.js"></script><script src="/coderwjh.gitee.io/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="/coderwjh.gitee.io/js/search/local-search.js"></script><div class="js-pjax"></div><script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="false"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>